如何获取在单击任何子元素时触发 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 一样 return 被点击的元素。

假设 <rect x="1" y="3" width="22" height="5"></rect> 被点击了。然后 e.target 将 return <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.

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

注意：None 的属性或属性值将被固定。一切都将是动态的。

Answer 1

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

Answer 2

您可以将 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>

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

1)

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

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

NOTE: All the mention ways are not the same, but will work same for the above example.

Answer 3

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

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

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;

}

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

How to get element whose onClick has been fired on click of any child element

javascript

jquery

dom-events

用法