侦听DOM元素的选择性事件

Question

我有这个HTML代码

<ul id='something'>
    <li class="listItem"><span class="name">Somename1</span> <span class="number">4</span></li>
    <li class="listItem"><span class="name">Somename2</span> <span class="number">4</span></li>
    <li class="listItem"><span class="name">Somename3</span> <span class="number">4</span></li>
</ul>

我也有这样的JavaScript代码，它将事件侦听器附加到ul标签上，如下所示：>

let itemList = document.getElementById('something')
itemList.addEventListener('click', event => {
    ....
})
我想使用事件冒泡来访问li元素，但span元素总是在浏览器中获取事件。如何禁用span元素上的事件侦听器？如何使用条件语句仅访问ul标记的直接子元素。有比我正在做的更好的方法吗？请使用纯JavaScript。

我有这个HTML代码

• Somename1 4

Answer 1

在事件目标上使用Element.closest()查找最接近的Element.closest()父元素（如果直接单击<li>，则查找自身）：

Answer 2

您可以使用指针事件css属性来实现此目的。