时间戳

首页 > 解决方案 > “e.target”调用错误的目标？

javascript - “e.target”调用错误的目标？

问题描述

我正在处理的组件依赖于<img>元素内部的<span>元素，当<span>通过 JQuery 检测到“单击”事件时，该跨度的 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>

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

标签： javascriptjquery

解决方案

行为符合预期。每个MDNevent.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>

推荐阅读