事件代理子项有多层 html 嵌套如何处理?

Question

<ul>
  <li class="target" data-custom="xxx"><span>span1</span><i>icon</i></li>
  <li class="target" data-custom="xxx"><span>span2</span><i>icon</i></li>
  <li class="target" data-custom="xxx"><span>span3</span><i>icon</i></li>
  <li class="target" data-custom="xxx"><span>span4</span><i>icon</i></li>
</ul>

ul 上绑定 click 事件监听，需要用到 li 上的自定义属性 data-custom
但是 li 中有其他标签，点击时的 e.target 可能是 span 或者 i 标签

我的场景嵌套的层数更多，我现在的处理办法是 parentNode 一层一层往上找，最后找到 class 为 "target" 的 li，但是感觉这么处理很傻。

大家遇到这样的情况是怎么处理的呢？

Answer 1

没关系，有原生的方法，不用担心性能问题

可以用e.target.closest('.target')获取到第一个类名为.target的父元素

https://developer.mozilla.org...