javascript—如何获取在单击任何子元素时触发onclick的元素

f1tvaqid  于 2021-09-23  发布在  Java
关注(0)|答案(3)|浏览(425)

我有这样的代码:

<a onclick="customerDelete056b0d3749b04208b61a6702477a2507(event)" id="ixnat-d26294a3-fcc0-40a3-93c5-7f61ad9b3da9"  data-id="dsddsss3226294a3-">
  <i data-js="drapcode-icons" id="it2ul" class="drapcode-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="customerDelete056b0d3749b04208b61a6702477a2507(event)" id="ixnat-d26294a3-fcc0-40a3-93c5-7f61ad9b3da9" data-id="dsddsss3226294a3-"> 这样我就可以拿到 data-id 这个属性(它也可以是其他属性,只是为(例如)写入了数据id。
也因为我不能使用 closest 由于它不是固定的,这将是 a 标记始终。它可以是另一个标签,如 button .
那么,要在单击子元素时获取具有事件处理程序的元素呢?
注意-没有一个或多个属性值是固定的。一切都将是动态的。

g6baxovj

g6baxovj1#

你可以用 currentTarget 为此。它指的是在其上设置事件侦听器的元素
当事件遍历dom时,事件接口的currenttarget只读属性标识事件的当前目标。它总是指事件处理程序已附加到的元素,而不是event.target,它标识事件发生的元素以及可能是其后代的元素。
文档

用法

<a onclick="customerDelete056b0d3749b04208b61a6702477a2507(event)" id="ixnat-d26294a3-fcc0-40a3-93c5-7f61ad9b3da9"  data-id="dsddsss3226294a3-">
    <i data-js="drapcode-icons" id="it2ul" class="drapcode-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 customerDelete056b0d3749b04208b61a6702477a2507(event) {
    /* This will be the a element */
    var a = event.currentTarget;

}
pdsfdshx

pdsfdshx2#

您可以发送 <a> 标记作为函数的参数 customerDelete056b0d3749b04208b61a6702477a2507("ixnat-d26294a3-fcc0-40a3-93c5-7f61ad9b3da9") 和使用 document.getElementById 方法获取的主体中的元素 customerDelete056b0d3749b04208b61a6702477a2507 功能。

ippsafx7

ippsafx73#

你可以使用 closest 方法 DOMString 喜欢 #id.class 诸如此类:

const customerDelete056b0d3749b04208b61a6702477a2507 = (event) => {
  console.log(
    event.target.closest("#ixnat-d26294a3-fcc0-40a3-93c5-7f61ad9b3da9")
  );
};
<a
  onclick="customerDelete056b0d3749b04208b61a6702477a2507(event)"
  id="ixnat-d26294a3-fcc0-40a3-93c5-7f61ad9b3da9"
  data-id="dsddsss3226294a3-"
>
  <i data-js="drapcode-icons" id="it2ul" class="drapcode-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]")

注意:所有提到的方法都不一样,但对上面的例子来说都是一样的。

相关问题