javascript - 关于直播活动的问题

Question

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

由于 .live() 方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播

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

Answer 1

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

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

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

---

示例尝试..

- document
  - div
    - link

您将单击事件处理程序绑定到链接（使用bindorclick方法）。

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

或者，如果您使用该.live方法绑定事件处理程序，它将被绑定到文档。如果您现在单击链接，事件（不会立即触发，因为没有处理程序绑定到它）将自然地上升到 DOM（触发它遇到的单击处理程序）。一旦它到达文档，它将触发我们自己的处理程序。但是没有鞋面可走，所以此时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()只有在事件已经冒泡时才会发挥它的魔力，因此停止传播事件是没有用的 - 为时已晚，它已经到达树的顶部并传播......