jQuery:事件冒泡以及"click"、"live.click"、"stopPropagation"和"return false"如何协同工作



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

以下是基本情况: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;不会阻止使用livedelegate绑定的事件冒泡。文档明确说明了所有冒泡,无论是使用return false;还是使用stopPropagation()。那么发生的是

  1. 点击<p>
  2. 单击气泡到<body>,触发body.click()
  3. 单击气泡以记录根,在根中它与$(event.target).closest('p');匹配,因此调用live('click')
  4. 发生Return false,但在步骤2调用了body处理程序

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

在这种情况下,事件到达同一位置(文档根(,返回false将停止传播到通过主体上的live绑定的另一个事件。

  1. 点击<p>
  2. 单击气泡到<body>,但由于主体的处理程序是通过live连接的,所以它还没有被调用
  3. 单击bubbles以记录根目录,其中它与$(event.target).closest('p');匹配,因此调用live('click')
  4. 发生返回错误
  5. 由于出现返回false,因此未在主体上调用live('click')

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

stopPropagation()明确用于防止冒泡,尽管它具有与return false;相同的限制,因此在live('click')事件中,如果有通过bind绑定的单击处理程序,它不会阻止冒泡。

  1. 实时事件总是发生在绑定事件之后(如调用click(fn)(。所以返回false在这里没有任何作用,因为$("body").click()已经发生了。这是由于起泡造成的。单击发生在您单击的元素的每个父元素上,触发每个单击事件。只有当它冒泡到根文档时,才会触发任何实时事件。

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

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

最新更新