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

Question

我有以下结构:

<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>

• 有超过 1 个 <li>项
• 所有 data-属性在 <li> 上元素

使用 jQuery，我通常会使用事件委托(delegate)而不是在每个 <li> 上附加事件处理程序。项目:

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

但是，我无法使用纯 JavaScript 复制它。 我希望能够点击 <li>项目而不单击其任何子元素。

我也不能随意使用 closest()因为我们必须为 IE11 提供支持。有没有更简单的实现方式？

编辑: 我避免将事件监听器附加到每个 <li>项，因为它不适用于动态创建的 <li>元素，也出于性能原因。

Answer 1

您可以通过设置 pointer-events: none 来禁止 li 的内容获取任何鼠标事件。

<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>

现在你可以保证 event.target 永远是 li