jQuery事件冒泡

Question

我想了解如何解释冒泡.这是否意味着上升HTML代码层次结构或其他东西？

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

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

这是什么意思？

Answer 1

"冒泡"的概念就像你有一个带有click事件的子元素,并且你不希望它触发父元素的click事件.你可以用event.stopPropagation().

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

事件捕获:

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

事件冒泡:

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

如果您正在使用live()或delegate()需要return false;,但它可能不起作用.阅读下面的报价.

每个jQuery文档:

由于.live()方法在事件传播到文档顶部后处理事件,因此无法停止实时事件的传播.同样,.delegate()处理的事件将传播到它们被委派给的元素; 在DOM树中它下面的任何元素上绑定的事件处理程序将在调用委托事件处理程序时执行.因此,这些处理程序可以通过调用event.stopPropagation()或返回false来阻止委托处理程序触发.

在过去,这是一个平台问题,Internet Explorer有一个冒泡的模型,Netscape更多的是关于捕获(但两者都支持).

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

我认为冒泡更受欢迎,因为正如所述,有些平台只支持冒泡......而且它有点像"默认"模式.

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

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

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

Answer 2

return false;

将防止"冒泡".它用于停止默认操作,例如选中复选框,打开选择,单击等.

要在使用.live()绑定一个绑定后停止执行其他处理程序,处理程序必须返回false.调用.stopPropagation()不会实现此目的.

来自jQuery .live()中的警告

推理(感谢@AlienWebguy):

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