logo标签列表

"e.target"调用了错误的目标？

javascriptjquery
4
我正在处理的组件依赖于 <span> 元素内部的 <img> 元素，当 <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>

有人发现我的代码中有明显的错误吗？

5个回答
10

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

1
你需要寻找的是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>

1

正如其他人所回答的那样，使用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>

1

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

0

我会委托并使用最近的

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接