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

【问题标题】：How to get element whose onClick has been fired on click of any child element如何获取在单击任何子元素时触发其 onClick 的元素
【发布时间】：2021-07-09 07:30:12
【问题描述】：

我的 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。

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

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

【问题讨论】：

标签： javascript jquery dom-events

【解决方案1】：

您可以为此使用currentTarget。它指的是设置了事件监听器的元素

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

Documentation

用法

<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;

}

【讨论】：

【解决方案2】：

您可以将<a>标签的id作为参数发送给函数customerDelete056b0d37("ixnat-d26294a3")，并使用document.getElementById方法获取customerDelete056b0d37函数体中的元素。

【讨论】：

【解决方案3】：

您可以将closest 方法与DOMString 一起使用，例如#id 或.class 等。像这样：

const customerDelete056b0d37 = (event) => {
  console.log(
    event.target.closest("#ixnat-d26294a3")
  );
};

<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>

您可以采取的其他一些方法：

event.target.closest('[data-id="dsddsss3226294a3"]')

event.target.closest("[data-id]")

注意：所有提及方式都不相同，但对于上面的例子来说都是一样的。

【讨论】：