jQuery:Event Bubbling以及“click”,“live.click”,“stopPropagation”和“return false”如何协同工作

前端之家收集整理的这篇文章主要介绍了jQuery:Event Bubbling以及“click”,“live.click”,“stopPropagation”和“return false”如何协同工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我会在这里有情侣情景.请帮我

这是基本案例:http://jsfiddle.net/2zsLy/9/

当我点击Click Me时,警报框和Another Paragraph都会出现.这是预期的,因为click事件会冒泡到父容器(即body).现在开始我的问题

1)http://jsfiddle.net/2zsLy/10/

为什么在我的live.click中添加return false不会阻止click事件冒泡.从示例中,live.click冒泡并触发警报框.我认为文档说返回false会阻止实时事件冒泡.

2)http://jsfiddle.net/2zsLy/11/

现在,我将body中的click事件更改为live.click,它解决了问题 – > click事件不会冒泡(因此不会显示警告框).为什么live.click工作而点击却没有.

3)http://jsfiddle.net/2zsLy/13/

我认为文档清楚地说调用event.stopPropagation()不会阻止冒泡发生,我刚刚做了.我使用event.stopPropagation()期望它仍会触发我的警报框,但事实并非如此.为什么?

注意:对于前两个问题的答案,请参阅justkt答案.对于最后一个问题的答案,请参阅Squeegy answer和他的回复.

解决方法

您可以在 event.stopPropagation()文档中找到您的问题的答案.

关于直播(‘点击’)与’点击’和冒泡:

Since the .live() method handles events once they have propagated to the top of the document,it is not possible to stop propagation of live events. Similarly,events handled by .delegate() will always propagate to the element to which they are delegated; event handlers on any elements below it will already have been executed by the time the delegated event handler is called.

所以你所看到的是预期的行为. live(‘click’)不会停止冒泡.现在优先考虑的.delegate()也是如此.

This answer广泛地描述了使用.live时停止推迟的问题.另见.live()文件

The event bubbles up until it reaches the root of the tree,which is where .live() binds its special handlers by default.

  • As of jQuery 1.4,event bubbling can optionally stop at a DOM element “context”.

关于stopPropagation本身:

Kill the bubbling on the click event.

所以stopPropagation()应该在任何返回false的地方防止冒泡;会,虽然不会在哪里.它是preventDefault(),不会阻止冒泡.返回虚假;实际上是stopPropagation()和preventDefault().

回应每个jsfiddle的例子.

1) 07005

返回虚假;不会阻止使用live或delegate绑定的事件冒泡.文档明确说明了所有冒泡,无论是否返回false;或者使用stopPropagation().那么会发生什么

>点击< p>
>点击气泡到< body>,触发body.click()
>点击气泡来记录根,它与$匹配(event.target).closest(‘p’);然后调用live(‘click’)
>返回false会发生,但在第2步调用了body处理程序

2) 07006

在这种情况下,事件到达相同的位置(文档根),并且返回false将传播停止到通过实时绑定的另一事件,该事件位于正文上.

>点击< p>
>点击气泡到< body>,但由于body的处理程序是通过live附加的,因此尚未调用
>点击气泡来记录根,它与$匹配(event.target).closest(‘p’);然后调用live(‘click’)
>返回错误发生
由于返回错误发生,未在身体上调用live(‘click’).

3) 07007

stopPropagation()显式用于防止冒泡,虽然它有相同的限制返回false;确实如此 – 如果有通过绑定绑定的点击处理程序,它将不会在实时(“点击”)事件的情况下阻止它.

猜你在找的jQuery相关文章