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

user_11068674 0
Viewed 591

My HTML code is similar to this:

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

Now I want to get the <a> element if any of the child elements get clicked.

As e.target did return the element that has been click.

Suppose <rect x="1" y="3" width="22" height="5"></rect> got clicked. then e.target will return <rect x="1" y="3" width="22" height="5"></rect>

But I want the element that has onClick associated like in this case. It will be <a onclick="customerDelete056b0d37(event)" id="ixnat-d26294a3" data-id="dsddsss3226294a3">

So I can get the data-id attribute of this element. (It can be some other attribute too, just wrote data-id as an example).

Also as I can not use the closest as it will not have a fixed position, nor this will always be a tag. It could be another tag like button.

How to get the element that has event handler on click of child element?

Note: None of the attribute or attribute values will be fixed. All will be dynamic.

dom-events jquery javascript
3 Answers

You can use currentTarget for that. It refers to the element on which the event listener was set

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

Usage

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

And in the javascript

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

}
user_13361740

You can send the id of <a> tag as argument to function customerDelete056b0d37("ixnat-d26294a3") and use document.getElementById method to get the element in the body of customerDelete056b0d37 function.

user_102884260

You can use the closest method with DOMString like #id or .class etc. Something like this:

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>

Some other approaches you can take:

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.

user_111712860
Related