Correct way to capture event.target when a child element is clicked

Question

I want to call a javascript function when an anchor is clicked and capture the element's href & title attributes. My code works fine if the content of the element is plaintext but when I introduce new elements inside of the anchor tag such as a label & icon then e.target is now the label or icon so I can no longer get the href attribute.

I can write some code that checks the element type and if it's not an anchor find the parent but I'm wondering if there's a better way for my function to get the anchor element from event.target even if a sub element is clicked?

function doStuff(e) {
  console.log(e.target.getAttribute("href"));
  console.log(e.target.getAttribute("title"));
  e.preventDefault();
}

<a href="/bob" title="Bob" onClick="doStuff(event)">
  <i class='fa fa-user'></i>
  <label>Bob</label>
</a>

You could use [`if(e.target.matches("a:link"))`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) (or `a[href]` as a selector). — Sebastian Simon, Sep 30 '19 at 14:38
Use `event.currentTarget`, See: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget — chautelly, Sep 30 '19 at 14:40
There has to be a better dupetarget than the one currently selected, though. It *is* a duplicate question, but... — T.J. Crowder, Sep 30 '19 at 14:46

score 3 · Answer 1 · answered Sep 30 '19 at 14:41

3

you could use event.currentTarget, which should give you the anchor element to which you have bound the event

answered Sep 30 '19 at 14:41

Dhananjai Pai

5,914
1
10
25

3

Many, many dupes easily found – mplungjan Sep 30 '19 at 14:42

score -2 · Answer 2 · answered Sep 30 '19 at 14:40

-2

When a sub/child element is clicked, you can get a reference to the parent through : event.target.offsetParent .

answered Sep 30 '19 at 14:40

Abe Caymo

193
7

[`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) is very much **not** the correct tool for this job. – T.J. Crowder Sep 30 '19 at 14:41
thought the question was about getting the parent, mistake on my part – Abe Caymo Sep 30 '19 at 15:24
Slightly, but the offset parent is (often) not the parent. – T.J. Crowder Sep 30 '19 at 15:32
should be `parentNode` then? – Abe Caymo Oct 01 '19 at 06:18
Not necessarily. It could be the parent of the parent, or the parent of the parent of the parent. The correct answer is `event.currentTarget`, as pointed out in the comments. – T.J. Crowder Oct 01 '19 at 07:26

Correct way to capture event.target when a child element is clicked

2 Answers2