"e.target"号召错了目标？

Question

我正在处理的组件依赖于<img>元素内部的<span>元素,当<span>通过JQuery检测到"click"事件时,该span的ID应记录到控制台.但由于某种原因,<img>正在记录的ID.

$(() => {
  	$('.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>

有人在我的代码中看到任何明显的错误吗？

Answer 1

行为与预期一致.按MDN,event.target是

对调度事件的对象的引用.它与event.currentTarget在事件的冒泡或捕获阶段调用事件处理程序时不同.

点击的最里面的元素是img,所以它img是target事件的元素.

如果您想要对处理程序所在的元素进行引用,请e.currentTarget改用:

$('.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>