如何在没有窗口刷新的情况下在值更改时捕获输入类型“文本”上的事件？

Question

As whenever I select any value from dropdown list, the page is refreshed(window element is clicked which I dont want).

1st TS file dynamically inserting input field value when the element is selected from dropdown

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

=> 2nd TS file catching the event

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

HTML to show the dropdown

<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

It makes sense that you click the dropdown to interact with it. Through a mechanism known as event bubbling , this click counts as a click on the window, because the window is an ancestor of the dropdown.

Handle the click event on the dropdown and call stopPropagation to prevent event handlers on ancestors from running.