jQuery事件冒泡

我想了解如何解释冒泡。 这是否意味着上升HTML代码层次结构或其他东西？

其次，我正在经历一个例子 ，我无法理解它所说的最后一部分

基于P的点击处理程序侦听click事件，然后阻止它传播（冒泡）

这是什么意思？

Answer 1

return false; 

将防止“冒泡”。 它用于停止默认操作，例如选中复选框，打开选择，单击等。

要在使用.live（）进行绑定后停止执行其他处理程序，处理程序必须返回false。 调用.stopPropagation（）不会实现这一点。

来自jQuery .live（）中的警告

---

推理（感谢@AlienWebguy）：

stopPropagation()不能与live()一起使用的原因是live()将事件绑定到文档，因此当它触发时，它没有传播的其他地方。

Answer 2

“冒泡”的概念就像你有一个带有click事件的子元素，并且你不希望它触发父元素的click事件。 您可以使用event.stopPropagation() 。

event.stopPropagation()基本上说只将这个click事件应用于THIS CHILD NODE并且不告诉父容器，因为我不希望它们做出反应。

事件捕获：

  | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | ----------------------------------- 

事件冒泡：

  / \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | ----------------------------------- 

如果您使用live()或delegate() ，则需要return false; ，虽然它可能不起作用。 阅读下面的报价。

每个jQuery文档 ：

由于.live（）方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。 同样，.delegate（）处理的事件将传播到它们被委派给的元素; 在DOM树中它下面的任何元素上绑定的事件处理程序将在调用委托事件处理程序时执行。 因此，这些处理程序可以通过调用event.stopPropagation（）或返回false来阻止委托处理程序触发。

在过去，这是一个平台问题，Internet Explorer有一个冒泡的模型，Netscape更多的是关于捕获（但两者都支持）。

W3C型号要求您能够选择所需的型号 。

我认为冒泡更受欢迎，因为正如所述，有些平台只支持冒泡……而且它有点像“默认”模式。

您选择哪一个主要是您正在做的事情和对您有意义的产品。

更多信息http://www.quirksmode.org/js/events_order.html

另一个很好的资源： http ： //fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 3

它的含义是live ()方法将一个处理程序附加到document元素并检查事件的target以查看它的来源。 如果目标与选择器匹配，则它会触发eventHandler。 所有这些都依赖于冒泡事件系统。

在示例中， p元素上的click处理程序，witch是a元素的祖先，通过返回false取消冒泡。 然后document元素将永远不会收到事件，因此它不会触发事件处理程序。

Answer 4

在下面的示例中，它将click事件附加到具有id“anchor”的锚点。 此锚点位于div中，该div也附加了单击事件。 如果我们点击这个锚点，它就像我们点击包含div一样好。 现在，如果我们想在这个锚点上做一些东西，但不想让div的点击被触发，我们可以停止事件冒泡，如下所示。

 
  
 $("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler. //Do stuff here }); $("#anchor").click(function(e){ //Do stuff here //This line stops the event bubling and //jquery has abstracted it in the event object to make it cross browser compatible. e.stopPropagation(); }); 

Answer 5

也：

 event.stopPropagation() 

http://api.jquery.com/event.stopPropagation/

Answer 6

是的，事件在树上运行，如果任何元素有该事件的处理程序，它将被调用。 通过在其中一个元素的处理程序中添加return:false ，可以防止事件冒泡。

Answer 7

这两个链接提供了关于事件冒泡（以及常用事件概念）的清晰而详尽的解释。

http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/

从第一个链接

将为a元素以及包含a所有元素触发事件 – 一直到document

从第二个链接

 
 
  Hello  
  

让我们假设我们单击跨度，这会导致在跨度上触发单击事件; 到目前为止没什么革命性的 但是，事件然后将（或气泡）传播到span（）的父级，并在其上触发click事件。 此过程针对文档元素的下一个父（或祖先）重复。

现在让我们把所有这些都放到DOM的上下文中。 DOM是一个…树，每个元素都是DOM树中的一个节点。 然后冒泡只是一个节点的遍历， some element到根节点， document （跟着你的父节点，直到你不能再进行）