Question

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

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

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

这是什么意思？

Answer 1

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

event.stopPropagation()基本上只说将此点击事件应用于此孩子节点并且不告诉父容器任何东西，因为我不希望他们做出反应。

事件捕获：

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

事件冒泡：

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

如果您使用live()或delegate()，则需要return false;，但可能无效。阅读下面的报价。

每jQuery docs：

由于.live（）方法在传播到的事件后处理它们在文档的顶部，不可能停止传播现场活动。同样，.delegate（）处理的事件也会传播他们被委派的要素;事件处理程序绑定 DOM树下面的任何元素都已经被执行了到调用委托事件处理程序时。这些处理程序，因此，可能会阻止委托的处理程序触发调用event.stopPropagation（）或返回false。

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

W3C model要求您能够选择自己想要的那个。

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

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

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

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

Answer 2

return false;

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

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

来自Caveats in jQuery .live()

<小时/> 推理（感谢@AlienWebguy）：

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

Answer 3

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

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

Answer 4

在下面的示例中，它将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();
});

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

来自第二个链接

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

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

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

jQuery事件冒泡

7 个答案:

来自第一个链接

来自第二个链接