原生JS 事件委托的问题

WytheChan
  • 766
<ul>
      <li><img src="img/remind.png" alt=""></li>
      <li><img src="img/remind.png" alt=""></li>
      <li><img src="img/remind.png" alt=""></li>
  </ul>

我点击事件绑定在ul,想委托到li,然后通过e.target的tagName是否是LI来判断,问题就是li里面还包含有其他元素,例如我的li里有一张图,点击的时候它的e.target是img,所以事件不会执行,怎么样才能把事件准确委托到li上,img只是一个例子,或者li会有更复杂的结构,这时候应该怎么躲开li里面的子元素进行委托呢?
我以前用的一个笨办法是,给li一个全覆盖的伪元素,但我觉得这样不太好

回复
阅读 1.5k
4 个回答
✓ 已被采纳

思路:
1、给要绑定的li添加class(news-item),ul添加class(news)
2、通过target判断class中是否包含news-item,如果不包含,通过target查找父级,以此类推,直到查找到li.news-item或者ul.news停止
3、如果没有找到li.news-item则不执行事件

肯定要判断的。

document.querySelector('ul').addEventListener('click', function(e) {
    console.log(e)
    if (e.target.nodeName === 'LI') {

    } else if (e.target.nodeName === 'IMG')
})

从你这张图的结构来说,用match匹配点击的元素

document.querySelector('ul').addEventListener('click', ({ target }) => {
  if (target.matches('ul li')) {
    console.log('click li')
  }
});

e.path.find 考虑一下?
可能需要浏览器兼容,没有研究过.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏