Question

我有一个包含一些按钮的div，我想将一个事件监听器附加到div，该div监听从其内部的按钮冒出的事件。

我遇到的问题是event.currentTarget的值似乎与docs所说的不匹配。

请考虑以下代码：

$('.container').on('click', '.myButton', function(event) {
  console.log("event.currentTarget:");
  console.log(event.currentTarget);

  console.log("event.target: ");
  console.log(event.target);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <button class="myButton">Click Me</button>
</div>

我正在使用jquery 1.8.3

event.currentTarget应该是容器div，但它被设置为其中的按钮。

我怎样才能解决这个问题。这是一个已知的错误还是我做错了什么？

Answer 1

我认为这是应该的。

在上述情况中，事件直接附加到按钮，因此currentTarget和target将始终相同。

$('.container').on('click', '.myButton', function(event) {});并不意味着事件附加到div。它只是委派活动。这意味着，该事件只会在.container之前冒出来，并且该事件仍然仅附加到.myButton

案例1：如果事件附加到div

如果单击该按钮，则currentTarget将为按钮，目标将为div。
如果单击div，则currentTarget将为div，target也将为div

示例

$('.container').on('click', function(event) { console.log(event.currentTarget); console.log(event.target); });

div{ border: 1px solid; width: 150px; height: 150px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="container"> <button class="myButton">Click Me</button> Click me </div>

案例2 :(您的情况）如果事件附加到按钮，则currentTarget和target将始终为按钮

$('.container').on('click','.myButton', function(event) { console.log(event.currentTarget); console.log(event.target); });

div{ border: 1px solid; width: 150px; height: 150px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="container"> <button class="myButton">Click Me</button> Click me </div>

Answer 2

根据http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-currentTarget

event.currentTarget用于指示其EventTarget EventListeners目前正在处理中。这是特别的在捕捉和冒泡期间很有用。

所以根据你的代码，它正在做它应该做的事情。要获得父级，您可以尝试var $target = $('event.target').parent();

Answer 3

这是因为您使用的是jQuery而不是本机JavaScript。

function testClick(e){
  console.log("event.currentTarget:");
  console.log(event.currentTarget);

  console.log("event.target: ");
  console.log(event.target);
}
$('.container').on('click', '.myButton', testClick);
document.getElementsByClassName('container')[0].addEventListener("click", testClick);

Answer 4

您选择容器div的假设是您的事件绑定错误。

如果您要执行以下操作：

$('.container').on('click', function(){/**/});

然后你的event.currentTarget将成为容器。 event.target可以是以下任何内容。

如果您添加选择器.myButton，则会将事件委托给该选择器，但不会委托给＆＃39; .container＆＃39;。

使用事件委派

4 个答案: