jQuery事件冒泡

Question

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

第二，我正在经历example，但我听不懂它的最后一部分

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

这是什么意思？

Answer 1

return false;

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

[要阻止其他处理程序在使用.live（）绑定后执行，处理程序必须返回false。调用.stopPropagation（）不会完成这个。

来自Caveats in jQuery .live()

---

推理（由于@AlienWebguy）：

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

Answer 2

“冒泡”的概念就像您有一个带有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 3

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

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

Answer 4

在下面的示例中，它将点击事件附加到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/eventshttp://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>

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

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