javascript - 简单的点击事件委托(delegate)不起作用

Question

我有一个div

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

现在，使用事件委托(delegate)和冒泡的概念，我想拦截来自 myDiv、myLink 和 anotherDiv 的点击。

根据最佳实践，这可以通过监听文档本身的全局点击(因此称为“委托(delegate)”)来完成

$(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;
});

请参阅上面的警告问题。我的印象是点击气泡。它在某种程度上确实如此，因为该文档实际上收到了我的点击并开始委托(delegate)。但是点击 myLink 和 anotherDiv 的冒泡机制似乎不起作用，因为 if 语句没有启动。

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

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

但这种方式违背了委托(delegate)的目的，因为我现在必须有很多“myDiv”处理程序，可能还有其他处理程序……只有一个“文档”事件委托(delegate)对象非常容易。

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

Answer 1

您应该使用 JQuery 中的实时事件(自 1.3 起)，它使用事件委托(delegate):

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

所以你的代码将是:

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

 });

有了它，你就拥有了事件委托(delegate)的所有好处(更快，一个事件监听器等等)，没有痛苦;-)