javascript - 如何在不刷新窗口的情况下捕获输入类型 'text' 的值更改事件？

Question

每当我从下拉列表中选择任何值时，页面都会刷新(点击了我不想要的窗口元素)。

第一个 TS 文件在从下拉列表中选择元素时动态插入输入字段值

private inputboxTrayselectionString: string = "*[data-type='tag']";       
base.$inputbox = base.$rootElement.find(base.inputboxTrayselectionString).eq(0);
base.$inputbox.val(dataArr.toString()).change();

$(window).click(function(e) {
   console.log('window clicked'); 
   base.$optionTray.hide();
});

=> 捕获事件的第二个 TS 文件

this.filterElByTagnew = $(this.rootElementSelectionString + ' input[data-type="tag"]');   
this.filterElByTagnew.on('change', function (e) { self.cummulativeOnChangeHandler();}); 

显示下拉列表的 HTML

<div class="eG2Col blog-inline-form">
   <label>Filter:</label>
   <div class="js-multiselectDropdown">
      <div style="background-color: white">
         <div class="action-btn " data-action="colex">    <span>Choose Tag</span></div>
         <input type="text" data-type="tag" >
         <div class="eG2Col list-show" data-action="option-tray">
            <ul></ul>
         </div>
         <div data-action="checkbox-tray" class="hidden">
            <input type="checkbox" value="5G" />5G</br>
            <input type="checkbox" value="Connectivity"  />Connectivity</br>
            <input type="checkbox" value="Digital transformation" />Digital transformation</br>
            <input type="checkbox" value="Radio system"  />Radio system</br>
            <input type="checkbox" value="Mobile"  />Mobile</br>
         </div>
      </div>
    </div>
 </div>

Answer 1

单击下拉菜单与其进行交互是有意义的。通过称为事件冒泡的机制，此点击计为对窗口的点击，因为该窗口是下拉列表的祖先。

处理下拉菜单上的click 事件并调用stopPropagation以防止祖先上的事件处理程序运行。