DOM元素上的选择性事件侦听
DOM元素上的选择性事件侦听
提问于 2019-11-18 06:49:43
我有这个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>我还有一段将事件侦听器附加到ul标记的JavaScript代码，如下所示
let itemList = document.getElementById('something')
itemList.addEventListener('click', event => {
....
})我想使用事件冒泡来访问li元素，但是span元素总是在浏览器中获得事件。如何禁用span元素上的事件侦听器？如何使用条件语句仅访问ul标记的直接子元素。有没有比我现在做的更好的方法呢？请注意，我使用的是纯JavaScript。
Stack Overflow用户
回答已采纳
发布于 2019-11-18 06:53:56
在事件的目标上使用Element.closest()查找最近的<li>父元素(如果直接单击li，则查找其本身)：
let itemList = document.getElementById('something')
itemList.addEventListener('click', event => {
const li = event.target.closest('li');
if (!li) return;
console.log(li);
})<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58905961
复制相关文章
相似问题
腾讯云开发者
