Question

我有一个列表（ul）的项目（li）s。我想使用事件委托将单击事件绑定到列表而不是绑定到每个单独的项目。我使用下面的代码来做到这一点。

document.getElementById('list').addEventListener('click', function(e) {
    if(e.target.nodeName === 'LI') {
        doTheWork();
    }
});

大。但是，我的列表项是其他节点的父项，当我点击这些节点时，我永远不能调用doTheWork，因为目标不是li。

<ul id="list">
    <li>
        <h3>Title</h3>
    </li>
    <li>...
</ul>

如何处理具有子项的列表项的单击而不将事件绑定到每个项目本身？例如，如果我的列表项有标题，当用户在技术上点击标题标签时，如何捕获列表项上的click事件？

Answer 1

您可以将pointer-events设置为none：

该元素永远不是鼠标事件的target;但是，鼠标事件如果那些后代具有，则可以将其后代元素作为目标指针事件设置为其他值。

#list > li * {
    pointer-events: none;
}

＆＃13;

document.getElementById('list').addEventListener('click', function(e) {
  if(e.target.nodeName.toLowerCase() === 'li') {
    console.log(e.target);
  }
});

＆＃13;

#list > li * {
  pointer-events: none;
}

＆＃13;

<ul id="list">
    <li>
        <h3>Title</h3>
    </li>
    <li>...</li>
</ul>

＆＃13;

事件委派 - 列出具有自己子项的项目

1 个答案: