如何停止从子 select 的父 div 传播事件

Question

There's a div element that contains 1 or more child elements of type select. When the div (my_title) is clicked, sort() has to run (OK). If a value is selected from the select (my_select), sort() is executed as well but it shouldn't. I tried to add a click handler and call stopPropagation() but sort() is still called. In fact, sort() is called first and only then stopPropagation().

<div id="my_title" onclick="sort(&quot;sf&quot;, &quot;2&quot;, event)" style="top: 0px; left: 1px; width: 300px; height: 50px; text-align: center; position: absolute;">
   Column 2
   <select id="my_select" style="top: 1px; left: 0px; width: 297px; position: relative;" >
      <option value="1">1</option>
      <option value="2">2</option>
   </select>
</div>

JavaScript:

function sort() {
    console.log('sort');
}

$('#my_title').on('click', '> select', function(event) {
    console.log('stopPropagation');
    event.stopPropagation();
    // event.cancelBubble = true;
    // event.stopImmediatePropagation();
});

Fiddle: https://jsfiddle.net/Smolo/34nh6Lwb/

Answer 1

Seems that that behavior happens when you use onclick="..."

Try using this instead:

$('#my_title').on('click', function(event) {
  sort()
})

Answer 2

You cannot stop event propagation between the target element and the delegated parent when using a delegated event handler. This is because the event needs to propagate up the DOM from the element that raises the event to the one which the handler is bound to.

A better solution in this case is to determine which element raised the click event handler and then only call sort() if it was the #my_title element.

Also note that your JS can be improved. Firstly, you should not bind JS event handlers or add styling in to the HTML. They should be placed in external JS and CSS files, respectively.

In addition, event handlers should be bound unobtrusively (as you do for the select element) not using outdated onX attributes which are bad practice.

Finally, use the change event on the select to listen for updates, not the click event.

With all those points addressed, your code should look like this:

 jQuery($ => { $('#my_title').on('click', e => { let $el = $(e.target); if ($el.is('#my_title')) sort($el.data('sort-key'), $el.data('sort-value')); }); $('#my_title').on('change', '> select', function(event) { // change handler logic here... console.log('change'); }); }); let sort = (key, value) => { // your sort logic here... console.log(key, value); }

 #my_title { top: 0px; left: 1px; width: 300px; height: 50px; text-align: center; position: absolute; } #my_select { top: 1px; left: 0px; width: 297px; position: relative; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="my_title" data-sort-key="sf" data-sort-value="2"> Column 2 <select id="my_select"> <option value="1">1</option> <option value="2">2</option> </select> </div>

Answer 3

Change your sort to something like this:

function sort(a, b, e) {
        if (e.target.id === 'my_title') { // or use more generic comparison
            console.log('sort');
    }
}

It will only run for elements that much your comparison (eg your Label/Title