简单单击事件委派不起作用

Question

我有一个div

<div class="myDiv">
  <a href="#" class="myLink">somelink</a>
  <div class="anotherDiv">somediv</div>
</div>  

现在，使用事件委托和冒泡的概念，我想截获来自myDiv、myLink和anotherDiv中的任何一个的点击。

根据最佳实践，这可以通过全局监听文档本身上的点击来完成(因此有术语“委派

$(document).click(function(e) {
  var $eventElem = $(e.target);
  var bStopDefaultClickAction = false;

  if ($eventElem.is('.myDiv'))
  {
    alert('Never alerts when clicking on myLink or anotherDiv, why????');
    bStopDefaultClickAction = true;
  }

  return bStopDefaultClickAction;
});

请参阅上面的警示问题。我的印象是点击泡泡。它在某种程度上是这样的，因为文档实际上收到了我的点击并开始委托。但是，在myLink和anotherDiv上点击的冒泡机制似乎不起作用，因为if语句不起作用。

或者像这样:单击冒泡只有一步，从单击的src元素到指定的委托对象(在本例中是文档)？如果是这样，那么我需要像这样处理委托：

$('.myDiv').click(function(e) {
  //...as before
});

但这种做法违背了委托的目的，因为我现在必须有很多'myDiv‘处理程序，可能还有其他的……只有一个“document”事件委托对象是非常容易的。

有人知道这是怎么回事吗？

Answer 1

事件目标不会更改。您需要镜像jquery live所做的事情，并实际检查$eventElem.closest(‘。myDiv')提供匹配。

尝试：

$(document).click(function(e) {
  var $eventElem = $(e.target);
  var bStopDefaultClickAction = false;

  if ( $eventElem.closest('.myDiv').length )
  {
    alert('Never alerts when clicking on myLink or anotherDiv, why????');
    bStopDefaultClickAction = true;
  }

  return bStopDefaultClickAction;
});

Answer 2

你应该使用JQuery的实况事件(从1.3开始)，它使用事件委派：

http://docs.jquery.com/Events/live

因此，您的代码将是：

 $(".myDiv").live("click", function(){
      alert('Alert when clicking on  myLink elements. Event delegation powaa !');

 });

这样，您就拥有了事件委派的所有好处(更快，一个事件侦听器等)，而没有痛苦;-)

Answer 3

Event.target始终是触发事件的元素，所以当您单击'myLink‘或'anotherDiv’时，您将使用$(e.target)存储对这些对象的引用；因此，您实际上要做的是：$('.myLink').is('.myDiv')，它返回false，这就是为什么不执行alert()。

如果你想以这种方式使用事件委托，你应该检查event.target是元素还是它的任何子元素，使用jQuery可以这样完成：

$(e.target).is('.myDiv, .myDiv *')