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();
});

=＆GT;第二个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以防止祖先上的事件处理程序运行。

如何在输入类型＆＃39;文本＆＃39;上捕获事件在没有窗口刷新的情况下改变价值？

1 个答案: