Question

我正在使用的组件依赖于<img>元素内的<span>元素，并且当<span>通过JQuery检测到“ click”事件时，该跨度的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

行为符合预期。根据{{3}}，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>

Answer 2

您要查找的是e.currentTarget，而不是e.target。检查代码段。 e.currentTarget是分配给侦听器的对象。 e.target是实际调度事件的对象（无论鼠标处于什么状态）

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

Answer 3

正如其他人回答的那样，使用e.currentTarget可以正常工作。还有一种使用function而不是arrow的方式，您也会受益于拥有this对象。您也可以在此处使用e.currentTarget。

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

Answer 4

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

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

4 个答案: