CODEWITHSUNDEEP
javascriptjquery
L.C.J
L.C.J

Reputation: 3253

"e.target" calling wrong target?

The component 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.com/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.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>

Anyone see any obvious mistakes in my code?

Upvotes: 5

Views: 4845

Answers (5)

mplungjan
mplungjan

Reputation: 178295

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.com/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.org/wikipedia/commons/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.org/wikipedia/commons/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.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /></span>
</div>

Upvotes: 0

KamalaH
KamalaH

Reputation: 1401

  	$('.star-span').click(e => {
	console.log(e.currentTarget.id);
  	})
<script src="https://ajax.googleapis.com/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.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>
</body>

Upvotes: 1

Karan
Karan

Reputation: 12629

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.com/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.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>

Upvotes: 1

cdoshi
cdoshi

Reputation: 2832

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.com/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.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371019

Behavior is as expected. Per MDN, event.target is

A reference to the object that dispatched the event. It is different from event.currentTarget when 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.com/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.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" />
</span>

Upvotes: 12

Related Questions