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'处理程序，可能还有其他人......只要有一个'文档'事件委托对象就很容易了。

任何人都知道这是如何运作的？

Answer 1

你应该使用JQuery的live事件（从1.3开始），它使用事件委托：

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

所以你的代码将是：

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

 });

有了这个，你就拥有了事件委托的所有好处（更快，一个事件监听器等......），没有痛苦; - ）

Answer 2

Event.target始终是触发事件的元素，因此当您单击“myLink”或“anotherDiv”时，使用$（e.target）存储对这些对象的引用;所以你实际做的是：$（'。myLink'）。is（'。myDiv'）返回false，这就是为什么不执行alert（）。

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

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

Answer 3

似乎对我很好。在这里试试：http://jsbin.com/uwari

Answer 4

事件目标不会改变。你需要反映jquery的实际操作，并实际检查$ 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 5

检查一下：在一个页面中单击处理程序

var page = document.getElementById("contentWrapper");
page.addEventListener("click", function (e) {
   var target, clickTarget, propagationFlag;      
   target = e.target || e.srcElement;
   while (target !== page) {
      clickTarget = target.getAttribute("data-clickTarget");
      if (clickTarget) {
          clickHandler[clickTarget](e);
          propagationFlag = target.getAttribute("data-propagationFlag");
      }
      if (propagationFlag === "true") {
          break;
      }
      target = target.parentNode;
   }
});

简单的点击事件委派无效

5 个答案: