关于直播活动的问题

Question

我只是在阅读http://api.jquery.com/event.stopPropagation/

由于 .live() 方法处理 事件一旦传播到 文档的顶部，它不是 可以停止直播的传播 事件

我对这个说法有点困惑，有人可以用一些例子解释一下吗？

Answer 1

Live 方法将处理程序绑定到文档，并通过event.target 属性识别触发事件的元素。

所以实际的处理程序位于顶部（就层次结构而言）。

stopPropagation 阻止冒泡上升到 DOM 层次结构，但由于处理程序已经位于顶部（在 .live 情况下），因此没有向上冒泡的位置。 .

---

示例尝试..

- document
  - div
    - link

您将点击事件处理程序绑定到链接（使用bind 或click 方法）。

当您单击链接时，会触发处理程序，但此外，单击事件会在 DOM 上上升，直到到达文档，并且还会触发绑定到 div 和文档的单击处理程序。 （除非你使用.stopPropagation）

或者，如果您使用.live 方法绑定事件处理程序，它将被绑定到文档。如果您现在单击链接，事件（不会立即触发，因为没有处理程序绑定到它）自然会在 DOM 上上升（​​触发它遇到的点击处理程序 em>）。一旦它到达文档，它将触发我们自己的处理程序。但是没有鞋面可走，所以stopPropagation 在这一点上是没用的。

Answer 2

HTML：

<div id="outer">
   <div id="inner">
       <span>.live() version</span>
   </div>
</div>

<div id="outer2">
   <div id="inner2">
       <span>.delegate() version</span>
   </div>
</div>

JS：

$(function(){

   $('#inner2').delegate('span', 'click', function(e){
      e.stopPropagation(); // indeed, no alert!
   });

   $('span').live('click', function(e){
      e.stopPropagation();
      // we would expect the propagation to stop here, so no alert, right?
   });

   $('#outer2, #outer').click(function(){ alert("Don't reach me!"); });

});

示例：http://jsfiddle.net/knr3v/2/

.live() 仅在事件已经冒泡后才发挥作用，因此停止传播事件是没有用的 - 为时已晚，它已经到达树的顶部并传播......