e.target references the image not the

Question

I have code that looks like this:

<a href="someline">
<img src="img.jpg"/>
</a>

I have code all over my page, to get the links, and get their href like this:

e.target.href

The problem is, when clicking the link that contains the image, then e.target is the image itself not the anchor tag. I tried setting the href on the image as a bad solution, but e.target.href is undefined on the image.

How do I solve it so that e.target will reference the <a> not the image.

So basically you want to target the parent elements of the image? Maybe try using `target.parentElement` — NewToJS, Dec 26 '16 at 16:31
It depends on where are you picking the event from. If you are picking it from the image then of course the e.target will return the image object instead. — Bekim Bacaj, Dec 26 '16 at 16:35

score 3 · Answer 1 · answered Dec 26 '16 at 16:34

We really need to see more code, but if the handler is attached to the a elements, use e.currentTarget (or this) rather than e.target.

If not (e.g., you're using event delegation or something), then just check the tagName and use parentNode until you find the a:

var el = e.target;
while (el && el.tagName !== "A") {
    el = el.parentNode;
}
if (el) {
    console.log(el.href);
}

Yosvel Quintero · Accepted Answer · 2016-12-26T17:23:27.133

1

You can attach the onclick event to the image and use Node.parentElement to get the a parent element as you have in your code:

document.getElementById('myImage').onclick = function(e) {
  e.preventDefault();
  
  console.log(e.target.parentElement.href);
};

<a href="someline">
  <img id="myImage" src="https://placehold.it/350x150"/>
</a>

edited Dec 26 '16 at 17:23

answered Dec 26 '16 at 16:35

Yosvel Quintero

18,669
5
37
46

e.target references the image not the

2 Answers2