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