有关实时事件的问题

Issue regarding live event

本文关键字：问题 事件 实时      更新时间：2023-09-26

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

由于 .live（） 方法处理 传播到 的事件 文档的顶部，它不是 可以停止活的传播 事件

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

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

因此，实际处理程序位于顶部（就层次结构而言）。

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

示例尝试.. 

- document
  - div
    - link

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

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

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

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()只有在事件已经冒泡后才会发挥它的魔力，所以阻止事件传播是没有用的——为时已晚，它已经到达树顶并传播......

相关文章：