Javascript jQuery事件冒泡

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

第二，我正在经历一场灾难，我不明白它最后说的是什么

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

这是什么意思

return false;

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

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

从

---

推理（感谢@AlienWebguy）：

---

stopPropagation（）

不能与

live（）

一起工作的原因是

live（）

将事件绑定到文档，因此在事件触发时，它就没有其他地方可以传播了。

冒泡的概念类似于如果有一个子元素具有单击事件，并且不希望它触发父元素的单击事件。您可以使用

event.stopPropagation（）

event.stopPropagation（）

基本上说，只将此单击事件应用于此子节点，不要告诉父容器任何事情，因为我不希望它们做出反应

事件捕获：

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

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

事件冒泡：

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

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

如果您正在使用

live（）

或

delegate（）

则需要

返回false，但它可能不起作用。阅读下面的引文

Per:

因为.live（）方法在事件传播到
在文档的顶部，无法停止的传播
现场活动。类似地，由.delegate（）处理的事件将传播
委托给他们的要素；绑定到上的事件处理程序
DOM树中它下面的任何元素都将已经执行
在调用委托事件处理程序时。这些处理者，
因此，可以通过以下方式防止委托处理程序触发：
调用event.stopPropagation（）或返回false

在过去，这是一个平台问题，InternetExplorer有一个冒泡的模型，Netscape更注重捕获（但两者都支持）

你的电话可以选择你想要的

我认为冒泡更受欢迎是因为，正如前面所说的，有一些平台只支持冒泡…而且它作为一种“默认”模式是有意义的

你选择哪一个在很大程度上取决于你正在做什么，以及什么对你有意义

更多信息

另一个伟大的资源：
还有：

event.stopPropagation()

是的，事件将在树上显示，如果任何元素具有该事件的处理程序，则将调用它。
通过在其中一个元素的处理程序中添加
return:false
，可以防止事件冒泡。
它说的是
live（）
方法将处理程序附加到
文档
元素，并检查事件的
目标
，以查看它来自何处。如果目标与选择器匹配，则触发eventHandler。所有这些都取决于冒泡事件系统

在本例中，
p
元素上的click处理程序是
a
元素的祖先，通过返回
false
来取消冒泡。然后
文档
元素将永远不会接收事件，因此它不会触发事件处理程序。
在下面的示例中，它将一个click事件附加到带有id“anchor”的anchor。该锚定位于一个div内，该div还附加了一个click事件。如果我们点击这个锚点，它就像我们点击包含的div一样好。现在如果我们想在这个锚点上做一些事情，但不想触发div的点击，我们可以停止事件的Bubbling，如下所示

<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();
});


$（“#div”）.click（函数（e）{//On anchor click此事件将不会激发，因为我们已在anchor click处理程序中停止事件传播。
//在这里做事
});
$（“#锚”）。单击（函数（e）{
//在这里做事
//此行停止事件的Bubbling和
//jquery在事件对象中对其进行了抽象，以使其跨浏览器兼容。
e、 停止传播（）；
});
这两个链接对事件冒泡（以及常用的事件概念）提供了清晰而详细的解释




从第一个环节
将为
a
元素以及所有元素触发事件
包含
a
的元素—一直到
文档

从第二个环节


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

现在让我们将所有这些放到DOM的上下文中。DOM是一个。。。树，每个元素都是DOM树中的一个节点。冒泡仅仅是遍历一个节点，
某个元素
到根节点，
文档
（跟着你的父母，直到你不能再这样做）
我试着用这样的词组，你比我快了。Perfetto…这就是我要找的……尽管第一段有点难理解，我想我必须读很多遍才能理解…但重点是，你已经按照我的问题回答了…我不是英国人，这就是为什么有时候我的句子很难理解…嗯…当我说“有点难理解”，我不是说英语…有些概念很难解释…但你肯定已经用最好的方式解释了…肯定能打败任何一个英国人。。。顺便说一句，即使我不是土生土长的英国人。这些时候，我甚至不知道有这样的事情存在+谢谢你让我学习