如何比较 e.currentTarget 和 e.Target? [英] How to compare e.currentTarget and e.Target?

问题描述

我收到按钮点击和背景点击的事件.在后台单击时，我得到的 currentTarget 和 Target 都相同，但在按钮的情况下，我得到了不同的结果.我如何比较它们是否相等，以便在相等时我可以执行某些操作?

解决方案

event.currentTarget 指的是侦听器绑定到的 element.

在演示中，我们可以看到我们是否真的点击了div(可能因为填充很大)匹配评估器e.target === e.currentTarget 事实上是真的.

document.querySelector('#test').addEventListener('click', (e) => {if(e.target === e.currentTarget) console.log('yes');});

div#test {填充:20px；背景颜色:红色；}div#test p {背景颜色:蓝色；}

尝试单击此处，然后单击 P<p id="test2">测试</p>

I am getting events on button click and background click. In background click I am getting currentTarget and Target both same but in case of button, I am getting different. How can I compare if they are equal or not so that on equal I can perform some operation?

解决方案

event.currentTarget refers to the element that the listener was bound to.

Here in the demo we can see if we do actually click the div (possible because of enormous padding) the the match evaluator e.target === e.currentTarget is in fact true.

document.querySelector('#test').addEventListener('click', (e) => {
  if(e.target === e.currentTarget) console.log('yes');
});

div#test {
  padding: 20px;
  background-color: red;
}

div#test p {
  background-color: blue;
}

<div id="test">
  Try clicking here and then the P
  <p id="test2">Test</p>
</div>

这篇关于如何比较 e.currentTarget 和 e.Target?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！