The ponent that I'm working on relies on <img> elements inside of <span> elements, and when the <span> detects a "click" event through JQuery, that span's ID should be logged to the console. But for some reason, the <img>'s ID is being logged instead.
$(() => {
$('.star-span').click(e => {
console.log(e.target);
});
});<script src=".1.1/jquery.min.js"></script>
<span class="star-span" id="1">
<img class="star-img" width="15%" src=".svg/2000px-Five-pointed_star.svg.png" />
</span>The ponent that I'm working on relies on <img> elements inside of <span> elements, and when the <span> detects a "click" event through JQuery, that span's ID should be logged to the console. But for some reason, the <img>'s ID is being logged instead.
$(() => {
$('.star-span').click(e => {
console.log(e.target);
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="star-span" id="1">
<img class="star-img" width="15%" src="https://upload.wikimedia/wikipedia/mons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>Anyone see any obvious mistakes in my code?
Share Improve this question asked Sep 5, 2018 at 5:37 L.C.JL.C.J 3,2534 gold badges16 silver badges18 bronze badges5 Answers
Reset to default 12Behavior is as expected. Per MDN, event.target is
A reference to the object that dispatched the event. It is different from
event.currentTargetwhen the event handler is called during the bubbling or capturing phase of the event.
The innermost element that was clicked on was the img, so the img is the target of the event.
If you wanted a reference to the element the handler is on, use e.currentTarget instead:
$('.star-span').click(e => {
console.log(e.currentTarget);
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="star-span" id="1">
<img class="star-img" width="15%" src="https://upload.wikimedia/wikipedia/mons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>What you are looking for is the e.currentTarget and not e.target. Check the snippet. e.currentTarget is what you assigned the listener to. e.target is what actually dispatches the event (whatever is under the mouse)
$(() => {
$('.star-span').click(e => {
console.log(e.currentTarget);
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="star-span" id="1">
<img class="star-img" width="15%" src="https://upload.wikimedia/wikipedia/mons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>As others have answered using e.currentTarget can work. There is also one more way using function instead of arrow and you will have benefit of having this object also. You can also use e.currentTarget here.
$(() => {
$('.star-span').click(function(e){
console.log(this);
console.log(e.currentTarget);
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="star-span" id="1">
<img class="star-img" width="15%" src="https://upload.wikimedia/wikipedia/mons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>
$('.star-span').click(e => {
console.log(e.currentTarget.id);
})<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<span class="star-span" id="1">
<img class="star-img" width="5%" src="https://upload.wikimedia/wikipedia/mons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>
</body>I would delegate and use closest
$(() => {
$('#container').on('click','.star-span',e => {
const tgt = e.target.closest('.star-span');
if (tgt) console.log(tgt.id)
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<span class="star-span" id="star1"><img class="star-img" width="15%" src="https://upload.wikimedia/wikipedia/mons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /></span>
<span class="star-span" id="star2"><img class="star-img" width="15%" src="https://upload.wikimedia/wikipedia/mons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /></span>
<span class="star-span" id="star3"><img class="star-img" width="15%" src="https://upload.wikimedia/wikipedia/mons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /></span>
</div>