jQuery 事件冒泡

Posted 2023-05-07

【中文标题】jQuery 事件冒泡

【英文标题】：jQuery event bubbling

【发布时间】：2011-10-20 05:24:33

【问题描述】：

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

其次，我正在查看example，但我无法理解它所说的最后一部分

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

这是什么意思？

【参考方案1】：

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

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

事件捕获：

               | |
---------------| |-----------------
| 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

另一个很棒的资源：@​​987654324@

【讨论】：

这些时候，甚至不知道有这样的东西存在。 +1 让我学到新东西！

您可能会发现这张图片（通过 w3c 的 DOM Level 3 事件规范）很有用：i.imgur.com/qlV9Z.png

【参考方案2】：

return false;

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

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

来自Caveats in jQuery .live()

---

推理（感谢@AlienWebguy）：

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

【讨论】：

嗯...听起来有点混乱...所以它是返回 false 还是 stopPropogation() 来阻止事件冒泡？

@test，返回 false 就是答案

Hmm..interesting..大多数其他答案都说 e.stopPropagation();你是说return false..可能需要用jsfiddle示例验证......

@test，根据live上的jQuery文档，e.stopPropagation()是不够的。我确定它适用于 chrome 或其他任何东西，但如果你想要真正的跨浏览器支持，则返回 false。这直接来自 jQuery 文档。

stopPropagation() 不能与live() 一起使用的原因是live() 将事件绑定到document，所以当它触发时，它已经没有其他地方可以传播了。跨度>

【参考方案3】：

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

在示例中，p 元素上的点击处理程序，女巫是 a 元素的祖先，通过返回 false 取消冒泡。那么document元素永远不会接收到事件，所以不会触发事件处理程序。

【讨论】：

我正试图表达这样的话，你打败了我。

Perfetto...这就是我一直在寻找的...尽管第 1 段有点难以理解，但我想我必须多次阅读才能理解。 ..但重点是，你真的按照我的问题回答了......

好吧，我的母语不是英语，这就是为什么有时我的句子很难理解...

嗯...当我说“有点难以理解”时，我指的不是英语..有些概念很难解释...但是您肯定已经在 BEST POSSIBLE 中解释过了方式...甚至可以击败任何英国人...顺便说一句...即使我不是土生土长的英国人..

【参考方案4】：

在下面的示例中，它附加了一个点击事件来锚定 id 为“anchor”。该锚点位于一个 div 中，该 div 还附加了一个点击事件。如果我们单击此锚点，则与单击包含的 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();
);

【参考方案5】：

还有：

event.stopPropagation()

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

【参考方案6】：

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

【参考方案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，这会导致在 span 上触发 click 事件；到目前为止还没有什么革命性的东西。但是，该事件随后会传播（或冒泡）到 span 的父级（the ），并在其上触发 click 事件。这个过程对下一个父（或祖先）重复直到文档元素。

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