Javascript jQuery 事件冒泡

jQuery event bubbling

提问by testndtv

I want to understand how exactly to interpret bubbling. Does it mean going up the HTML code hierarchy or something else?

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

Secondly, I was going through an exampleand I could not understand the last part where it says

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

The P-based click handler listens for the click event and then prevents it from being propagated (bubbling up)

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

What does this mean?

这是什么意思？

采纳答案by Joe

return false;

will prevent "bubbling". It's used to stop default actions like checking a checkbox, opening a select, a click, etc.

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

To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.

要在使用 .live() 进行一次绑定后阻止进一步的处理程序执行，处理程序必须返回 false。调用 .stopPropagation() 不会实现这一点。

From Caveats in jQuery .live()

来自jQuery .live() 中的警告

---

---

推理（感谢@AlienWebguy）：

The reason stopPropagation()doesn't work with live()is that live()binds the event to document so by the time it fires there's no where else for it to propagate.

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

回答by AlienWebguy

The concept of "bubbling up" is like if you have a child element with a click event and you don't want it to trigger the click event of the parent. You could use event.stopPropagation().

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

event.stopPropagation()basically says only apply this click event to THIS CHILD NODE and don't tell the parent containers anything because I don't want them to react.

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

Event Capturing:

事件捕获：

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

Event Bubbling:

事件冒泡：

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

If you are using live()or delegate()you will need to return false;, though it may not work. Read the quote below.

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

Per jQuery docs:

根据jQuery 文档：

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

由于 .live() 方法在事件传播到文档顶部后处理事件，因此不可能停止实时事件的传播。类似地，由 .delegate() 处理的事件将传播到它们被委托的元素；绑定在 DOM 树中它下面的任何元素上的事件处理程序将在调用委托的事件处理程序时已经执行。因此，这些处理程序可能会通过调用 event.stopPropagation() 或返回 false 来阻止委托的处理程序触发。

In the past it was a platform issue, Internet Explorer had a bubbling model, and Netscape was more about capturing (yet supported both).

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

The W3C modelcalls for you be able to choose which one you want.

在W3C模型你可以选择你想要的一个电话。

I think bubbling is more popular because, as stated there are some platforms that only support bubbling...and it sort of makes sense as a "default" mode.

我认为冒泡更受欢迎，因为如上所述，有一些平台只支持冒泡……作为“默认”模式，它有点有意义。

Which one you choose is largely a product of what you are doing and what makes sense to you.

您选择哪一个很大程度上取决于您正在做什么以及对您有意义的内容。

More info http://www.quirksmode.org/js/events_order.html

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

Another great resource: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

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

回答by Johnny5

What it says is that the live ()method attach a handler to the documentelement and check the targetof the event to see where it comes from. If the target match the selector, then it fires the eventHandler. All that repose on the bubbling event system.

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

In the example, the click handler on the pelement, witch is an ancestor of the aelement, cancel the bubbling by returning false. Then the documentelement will never receive the event, so it will not trigger the event handler.

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

回答by ShankarSangoli

In the below example it is attaching a click event to anchor with id "anchor". This anchor is within a div which also has a click event attached. If we click on this anchor it is as good as we are clicking on the containing div. Now if we want to do some stuff on this anchor click but do not want the div's click to be fired we can stop the event bubling as below.

在下面的例子中，它附加了一个点击事件来锚定 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();
});

回答by Gerald

These two links provide clear and elaborate explanation on event bubbling (as well as commonly used event concepts).

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

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

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

From the first link

从第一个链接

event will be triggered for the aelement as well as for all of the elements that contain the a— all the way up to the document

事件将针对a元素以及包含该元素的所有元素触发a- 一直到document

From the second link

从第二个链接

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

Lets assume we click the span, which causes a click event to be fired on the span; nothing revolutionary so far. However, the event then propagates (or bubbles) to the parent of the span (the ), and a click event is fired on that. This process repeats for the next parent (or ancestor) up to the document element.

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

Now let's put all this into the context of a DOM. The DOM is a... tree and each element is a node in the DOM tree. Bubbling is then merely the traversal of a node, some elementto the root node, document(follow your parent until you can't anymore)

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

回答by Jason Kaczmarsky

Also:

还：

event.stopPropagation()

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

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

回答by Ionut Popa

Yes, the event goes up the tree and if any element has a handler for that event it will be called. By adding return:falsein a handler of one of the elements the event will be prevented from bubbling.

是的，事件会在树上上升，如果任何元素具有该事件的处理程序，它将被调用。通过添加return:false元素之一的处理程序，将防止事件冒泡。