当事件处理程序附加到父级时，防止在某个子级之后单击

Question

I have the following structure:

<ul id="list-items">
    <li class="item" data-id="123" data-title="Some Title">
        <div class="block">
            <img src="#"/>
            <a href="#">Link</a>
            <p>Some excerpt</p>
        </div>
    </li>
</ul>

• There are more than 1 <li> item
• All data- attributes are on the <li> elements

Using jQuery, I would usually make use of event delegation instead of attaching event handlers on every <li> item:

$( document ).on( 'click', '.item', function() {
    var id    = $( this ).data( 'id' );
    var title = $( this ).data( 'title' );
});

However, I am not able to replicate this using Pure JavaScript. I want to be able to click on an <li> item without clicking any of its child elements.

I am also not at the liberty of using closest() since we have to provide support for IE11. Is there a simpler way to implement it?

EDIT: I am avoiding attaching event listeners to each <li> item as it won't work for dynamically created <li> elements, and also for performance reasons.

Answer 1

You can disable the li 's content from getting any mouse event by setting a pointer-events: none to it.

<li class="item" data-id="123" data-title="Some Title">
    <div class="block" style="pointer-events: none">
        <img src="#"/>
        <a href="#">Link</a>
        <p>Some excerpt</p>
    </div>
</li>

You can guarantee now that the event.target will always be the li

Answer 2

If you don't want to attach event handler on all the items directly. you can attach only one event handler on the parent like this

var element = document.querySelector("#vanilla-parent")
element.addEventListener("click", function(event){
  event.composedPath().forEach(function(elm){
    if (elm.tagName === 'LI') {
      // do something
    }
  });
});

$("#jquery-parent").on("click", "li", function(event){
   // do something
});

Pen demonstrating the same: https://codepen.io/kireeti-tiki/pen/EzPpqZ?editors=1010

I used composedPath on the event object to get to li, I wouldn't recommend this as this is a bit of hacky way to get to the solution. Also, it is not supported on IE and Edge. So stay away from that solution if you need support for those browsers. More on that subject here https://developer.mozilla.org/en-US/docs/Web/API/Event

If using jQuery is not a problem, Then I would recommend that approach.

Answer 3

Will something like get all li and attach an eventlistener do?

<script>

    var li_list = document.getElementsByTagName('li');

    for(var i = 0; i < li_list.length; i++) {
        (function(index) {
            li_list[index].addEventListener("click", function() {
                event.preventDefault();
                alert('clicked')
            })
        })(i);
    }
</script>

Answer 4

Here's an example using Element.closest() , for which there is a polyfill.

 function attachClickHandler() { const list = document.querySelector('.list'); list.addEventListener('click', (item) => { // console.log('Item:', item); const closest = item.target.closest('li'); console.log('Closest li:', closest); console.log('Data on closest li:', closest.tagName, closest.dataset && closest.dataset.id || 'no data'); // alternative console.log(' === alt ==='); let elem = item.target; while (elem.tagName.toLowerCase() !== 'li') { elem = elem.parentNode; if (elem.tagName.toLowerCase() === 'ul') { break; } } console.log('Manual version:', elem.tagName, elem.dataset && elem.dataset.id || 'no data'); }); console.log('Listening.'); } attachClickHandler(); 

 <h1>My list</h1> <ul class="list"> <li data-id="1">Item 1</li> <li data-id="2"><button>Item 2</button></li> <li>Empty item</li> </ul> 

Edit : This won't work on IE as stackoverflow likely doesn't load the polyfill. But if you test it standalone (should be 3 seconds work) you can verify if it's good enough for you.