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

时间:2011-05-03 17:20:50

标签: jquery

我会在这里有情侣情景。请帮帮我

以下是基本案例: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回答和他的回复

2 个答案:

答案 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例子。

  

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

return false;不会阻止使用livedelegate绑定的事件冒泡。文档明确说明了所有冒泡,无论是使用return false;还是使用stopPropagation()。那么会发生什么

  1. 点击<p>
  2. 点击气球至<body>,其中body.click()已触发
  3. 点击气球以记录根目录,与$(event.target).closest('p');匹配,然后调用live('click')
  4. 返回false,但在第2步调用了body处理程序
  5.   

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

    在这种情况下,事件会到达相同的位置(文档根目录),并且返回false会将传播停止到通过身体上的live进一步绑定的事件。

    1. 点击<p>
    2. 点击气球到<body>,但由于身体的处理程序是通过实时附加的,因此尚未调用
    3. 点击气球以记录根目录,与$(event.target).closest('p');匹配,然后调用live('click')
    4. 返回错误发生
    5. 由于返回错误,
    6. live('click')未在身体上调用。
    7.   

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

      stopPropagation()明确用于防止冒泡,虽然它具有相同的限制return false; - 所以如果有live('click')事件,它就不会阻止它处理程序通过bind绑定。

答案 1 :(得分:2)

  1. 直播事件始终发生在绑定事件之后(如调用click(fn))。因此,返回false在此处不执行任何操作,因为$("body").click()已经发生。这是由于冒泡。单击发生在您单击的元素的每个父元素上,从而触发每个单击事件。只有当它冒泡到根文档时,它才会触发任何实时事件。

  2. 在此示例中,您有2个直播活动。因此,事件会冒泡到文档,jQuery开始运行它找到的与您的点击匹配的任何实时事件。当它获得return false时,它会停止运行任何其他直播活动。现场活动首先宣布,先运行。因此,在p实时点击后,警报被添加到实时事件堆栈中,因此您获得了新段落,但没有其他内容。

  3. 它不会停止对绑定事件的传播,但event参数实际上是一个jQuery事件包装器对象,我相信它知道live。因此它具有与返回false类似的效果,它可以防止文档点击处理程序执行任何其他实时事件。