jQuery:事件冒泡以及如何“点击"，"live.click"，"stopPropagation"和"return false".一起工作 [英] jQuery: Event Bubbling and how "click", "live.click", "stopPropagation", and "return false" work together
问题描述
我在这里有夫妻场景.请帮助我
I will have couples scenario here. Please help me
这是基本情况: http://jsfiddle.net/2zsLy/9/
当我单击Click Me时，警报框和Another Paragraph都会出现.这是可以预期的，因为click事件冒泡到父容器(body). 现在开始我的问题
When I click Click Me, both alert box and Another Paragraph come out. This is expected since the click event bubble up to the parent container, which is body. Now start my questions
1) http://jsfiddle.net/2zsLy/10/
将return false添加到我的live.click不会阻止点击事件起泡.在该示例中，live.click冒泡并触发警报框.我以为文档说return false将从气泡停止实时事件.
How come adding return false to my live.click does not stop the click event from bubble up. From the example, the live.click bubble up and trigger the alert box. I thought the documentation said that return false will stop the live event from bubble.
2) http://jsfiddle.net/2zsLy/11/
现在，我将body中的click事件更改为live.click并解决了问题-> click事件不会冒泡(因此不会显示警报框).为什么live.click起作用而click不能起作用.
Now, I change the click event in body to live.click and it fix the problem -> the click event does not bubble up (hence no alert box is shown). Why does live.click work and click does not.
3) http://jsfiddle.net/2zsLy/13/
我认为文档清楚地表明，调用event.stopPropagation()不会阻止冒泡的发生，我只是这样做了.我使用event.stopPropagation()期望它仍然会触发我的警报框，但不会触发.为什么?
I think the documentation clearly said that calling event.stopPropagation() will not stop the bubbling up from occurring, well I just did. I use event.stopPropagation() expecting that it will still trigger my alert box, but it does not. Why?
注意:有关前两个问题的答案，请参见justkt答案.有关最后一个问题的答案，请参见Squeegy答案和他的答复.
NOTE: for the answer of the first two question, see justkt answers. For the answer to the last question, see Squeegy answer and his reply.
推荐答案
可以在关于live('click')与'click'和冒泡:
With regards to live('click') versus 'click' and bubbling:
由于.live()方法一旦将事件传播到文档顶部便会对其进行处理，因此无法停止实时事件的传播.同样，由.delegate()处理的事件将始终传播到它们所委派的元素；到委托事件处理程序被调用时，它下面任何元素上的事件处理程序都将已经执行.
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()也是如此.
So what you are seeing is expected behavior. live('click') won't stop bubbling. The same is true of the now-preferred .delegate().
此答案广泛描述了使用.live时停止传播的问题.另请参见 .live()文档:
This answer describes extensively the problems of stopping propegation when using .live. See also the .live() documention:
事件冒泡直到到达树的根为止，这是.live()默认绑定其特殊处理程序的位置.
The event bubbles up until it reaches the root of the tree, which is where .live() binds its special handlers by default.
- 从jQuery 1.4开始，事件冒泡可以选择在DOM元素上下文"处停止.
- As of jQuery 1.4, event bubbling can optionally stop at a DOM element "context".
关于stopPropagation本身:
With regards to stopPropagation itself:
阻止点击事件冒泡.
Kill the bubbling on the click event.
所以stopPropagation()应该防止冒泡凡返回false的地方；会，尽管不会.不会阻止冒泡的是 preventDefault(). return false;实际上是stopPropagation()和preventDefault().
So stopPropagation() should prevent bubbling wherever return false; will, although not where it won't. It is preventDefault() that will not prevent bubbling. return false; is effectively stopPropagation() and preventDefault().
响应每个jsfiddle示例.
In response to each jsfiddle example.
return false;不会阻止使用live或delegate绑定的事件冒泡.该文档明确说明了所有起泡，无论是使用return false;还是使用stopPropagation().
return false; will not prevent events bound using live or delegate from bubbling up. The documentation explicitly says this about all bubbling, whether done with return false; or with stopPropagation(). So what happens is
- 点击
<p> - 单击气泡到
<body>，其中触发body.click() - 单击气泡以记录根目录，在该根目录中匹配
$(event.target).closest('p');，从而调用live('click') - 返回false，但是在步骤2中调用了body处理程序
- Click on
<p> - Click bubbles to
<body>, wherebody.click()is triggered - Click bubbles to document root, where it matches
$(event.target).closest('p');and solive('click')is invoked - Return false happens, but body handler was invoked at step 2
在这种情况下，事件到达同一位置(文档根目录)，并且返回false停止传播到通过正文上的live绑定的另一个事件.
In this case the event gets to the same spot (document root) and the return false stops the propagation to the further event bound via live, which is on the body.
- 点击
<p> - 单击气泡至
<body>，但由于正文的处理程序是通过实时附加的，因此尚未调用 - 单击气泡以记录根目录，在该根目录中匹配
$(event.target).closest('p');，从而调用live('click') - 返回错误的情况 由于出现了返回假，因此未在主体上调用
-
live('click').
- Click on
<p> - Click bubbles to
<body>, but since body's handler is attached via live it is not invoked yet - Click bubbles to document root, where it matches
$(event.target).closest('p');and solive('click')is invoked - Return false happens
live('click')is not invoked on the body due to the return false occurring.
stopPropagation()明确用于防止冒泡，尽管它具有与return false;相同的限制-因此，如果存在通过bind绑定的点击处理程序，则在live('click')事件的情况下它不会阻止冒泡. .
stopPropagation() is explicitly used to prevent bubbling, although it has the same restrictions return false; does - so it won't prevent it in the case of a live('click') event if there are click handlers bound via bind.
这篇关于jQuery:事件冒泡以及如何“点击"，"live.click"，"stopPropagation"和"return false".一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
