我在这里会有情侣场景。请帮我
以下是基本情况:http://jsfiddle.net/2zsLy/9/
当我单击Click Me
时,会同时显示警告框和Another Paragraph
。这是意料之中的事,因为点击事件会冒泡到父容器,即body
现在开始我的问题
1(http://jsfiddle.net/2zsLy/10/
为什么将return false
添加到我的live.click
中并不能阻止点击事件冒泡。在该示例中,live.click弹出并触发警报框。我以为文件上说,返回false将阻止现场活动的泡沫。
2(http://jsfiddle.net/2zsLy/11/
现在,我将body
中的单击事件更改为live.click
,它解决了问题->单击事件不会弹出(因此不会显示警报框(。为什么live.click
有效而click
无效。
3(http://jsfiddle.net/2zsLy/13/
我认为文档清楚地表明,调用event.stopPropagation()
不会阻止冒泡的发生,我刚刚做到了。我使用event.stopPropagation()
,希望它仍然会触发我的警报框,但它没有。为什么?
注意:关于前两个问题的答案,请参阅justkt
答案。关于最后一个问题的答案,请参阅Squeegy
的答案和他的回答。
您的问题答案可以在event.stopPropagation((文档中找到。
关于直播("点击"(与"点击"和冒泡:
由于.live((方法在事件传播到文档顶部后处理事件,因此不可能停止实时事件的传播。类似地,.delete((处理的事件将始终传播到它们被委派到的元素;在调用委托的事件处理程序时,它下面的任何元素上的事件处理都将已经执行。
所以你看到的是预期的行为。live(click(不会停止冒泡。现在preferred.delete((.也是如此
这个答案详细描述了在使用.live时停止推进的问题。另请参阅.live((文档:
事件会冒泡,直到到达树的根,默认情况下.live((会在树的根绑定其特殊处理程序。
- 从jQuery1.4开始,事件冒泡可以选择性地在DOM元素"context"处停止
关于stopPropagation本身:
杀死点击事件上的冒泡。
因此stopPropagation((应该在返回false的地方防止冒泡;会,尽管不会在哪里。preventDefault((不会阻止冒泡。return false;
实际上是stopPropagation((和preventDefault((。
针对每个jsfiddle示例。
1(http://jsfiddle.net/2zsLy/10/
return false;
不会阻止使用live
或delegate
绑定的事件冒泡。文档明确说明了所有冒泡,无论是使用return false;
还是使用stopPropagation()
。那么发生的是
- 点击
<p>
- 单击气泡到
<body>
,触发body.click()
- 单击气泡以记录根,在根中它与
$(event.target).closest('p');
匹配,因此调用live('click')
- 发生Return false,但在步骤2调用了body处理程序
2(http://jsfiddle.net/2zsLy/11/
在这种情况下,事件到达同一位置(文档根(,返回false将停止传播到通过主体上的live
绑定的另一个事件。
- 点击
<p>
- 单击气泡到
<body>
,但由于主体的处理程序是通过live连接的,所以它还没有被调用 - 单击bubbles以记录根目录,其中它与
$(event.target).closest('p');
匹配,因此调用live('click')
- 发生返回错误
- 由于出现返回false,因此未在主体上调用
live('click')
3(http://jsfiddle.net/2zsLy/13/
stopPropagation()
明确用于防止冒泡,尽管它具有与return false;
相同的限制,因此在live('click')
事件中,如果有通过bind
绑定的单击处理程序,它不会阻止冒泡。
-
实时事件总是发生在绑定事件之后(如调用
click(fn)
(。所以返回false在这里没有任何作用,因为$("body").click()
已经发生了。这是由于起泡造成的。单击发生在您单击的元素的每个父元素上,触发每个单击事件。只有当它冒泡到根文档时,才会触发任何实时事件。 -
在本例中,您有2个实时事件。因此,事件在文档中冒泡,jQuery开始运行它发现的与您的点击匹配的任何实时事件。当它获得
return false
时,它将停止运行任何其他实时事件。现场活动先宣布,先运行。因此,您得到了新的段落,但没有其他内容,因为在p
实时点击后,警报被添加到了实时事件堆栈中。 -
它不会停止对绑定事件的传播,但
event
参数实际上是一个jQuery事件包装器对象,我相信它知道live
。因此,它具有与返回false类似的效果,它阻止文档单击处理程序执行任何其他实时事件。