jQuery事件冒泡

jQuery event bubbling

本文关键字：事件 jQuery      更新时间：2023-09-26

我想了解如何准确地解释冒泡。它是指HTML代码层次还是别的什么?

其次，我正在看一个例子，我不明白最后一部分，它说

基于p的单击处理程序侦听单击事件，然后阻止它被传播(冒泡)

这是什么意思?

"冒泡"的概念就像如果你有一个带有点击事件的子元素，而你不希望它触发父元素的点击事件。你可以用event.stopPropagation()

event.stopPropagation()基本上说，只应用这个点击事件到这个子节点，不告诉父容器任何东西，因为我不想让他们反应。

事件捕获: 

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  ' /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

事件冒泡:

               / '
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

如果您正在使用live()或delegate()，您将需要return false;，尽管它可能不起作用。阅读下面的引用。

Per jQuery docs:

因为.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/

return false;

将防止"冒泡"。它用于停止默认操作，如勾选复选框，打开选择，点击等。

要使用.live()停止在一次绑定后执行其他处理程序，处理程序必须返回false。而调用.stopPropagation()则不会成就这事。

来自jQuery .live()

推理(感谢@AlienWebguy):

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

它说的是live ()方法将处理程序附加到document元素，并检查事件的target以查看它来自何处。如果目标匹配选择器，那么它会触发eventandler。这一切都取决于冒泡事件系统。

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

在下面的例子中，它将一个click事件附加到id为"anchor"的锚。这个锚位于一个div中，该div还附加了一个click事件。如果我们点击这个锚点，它就像我们点击包含的div一样。现在，如果我们想在这个锚点点击上做一些事情，但不希望div的点击被触发，我们可以停止事件冒泡，如下所示。

<div id="div">
<a href="google.com" id="anchor"></a>
</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();
});

Also:

event.stopPropagation()

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

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

这两个链接为事件冒泡(以及常用的事件概念)提供了清晰详细的解释。

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

来自第一个链接

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

从第二个链接

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

让我们假设我们点击了span，这会导致在span上触发一个click事件;到目前为止还没有什么革命性的东西。然而，事件随后会传播(或冒泡)到跨度的父节点，并在其上触发一个click事件。对于下一个父元素(或祖先元素)，直到文档元素，此过程重复。

现在让我们把所有这些放到DOM的上下文中。DOM是一个…每个元素都是DOM树中的一个节点。冒泡只是将节点some element遍历到根节点document(跟随父节点直到无法继续)

相关文章：