如何获取在单击任何子元素时触发 onClick 的元素

Question

我的 HTML 代码与此类似：

<a onclick="customerDelete056b0d37(event)" id="ixnat-d26294a3"  data-id="dsddsss3226294a3">
  <i data-js="icons" id="it2ul" class="icons">
     <polyline points="21 8 21 21 3 21 3 8"></polyline>
     <rect x="1" y="3" width="22" height="5"></rect>
     <line x1="10" y1="12" x2="14" y2="12"></line>
  </i>
</a>

<a>现在，如果任何子元素被单击，我想获取该元素。

正如e.target返回已被单击的元素一样。

假设<rect x="1" y="3" width="22" height="5"></rect>被点击了。然后e.target会返回<rect x="1" y="3" width="22" height="5"></rect>

但我想要像本例中那样关联的元素onClick。这将是 <a onclick="customerDelete056b0d37(event)" id="ixnat-d26294a3" data-id="dsddsss3226294a3">

这样我就可以得到data-id这个元素的属性了。（也可以是其他属性，只是data-id作为示例编写）。

另外，因为我不能使用，closest因为它没有固定位置，也不会始终是a标签。它可能是另一个标签，例如button.

如何获取在单击子元素时具有事件处理程序的元素？

注意：所有属性或属性值都不会被固定。一切都将是动态的。

Answer 1

你可以用currentTarget它。它指的是设置了事件监听器的元素

当事件遍历 DOM 时，Event 接口的 currentTarget 只读属性标识事件的当前目标。它始终引用事件处理程序已附加到的元素，而不是 Event.target，后者标识发生事件的元素并且可能是其后代元素。

文档

用法

<a onclick="customerDelete056b0d37(event)" id="ixnat-d26294a3"  data-id="dsddsss3226294a3">
    <i data-js="icons" id="it2ul" class="icons">
        <polyline points="21 8 21 21 3 21 3 8"></polyline>
        <rect x="1" y="3" width="22" height="5"></rect>
        <line x1="10" y1="12" x2="14" y2="12"></line>
    </i>
</a>

在 JavaScript 中

function customerDelete056b0d37(event) {
    /* This will be the a element */
    var a = event.currentTarget;

}