有关现场活动的问题

发布于 2024-11-07 13:16:22 字数 249 浏览 6 评论 0原文

我刚刚阅读 http://api.jquery.com/event.stopPropagation/

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

，有人可以用一些例子向我解释一下吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你与清晨阳光 2024-11-14 13:16:22

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

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

stopPropagation 阻止冒泡沿着 DOM 层次结构向上移动，但由于处理程序已经位于顶部（在 .live 情况下）没有更高的地方可以冒泡..

示例尝试..

- document
  - div
    - link

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

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

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

Live method binds a handler to the document, and identifies which element triggered the event from the event.target property.

So the actual handler is at the top (in terms of hierarchy).

The stopPropagation stops the bubbling from going up the DOM hierarchy, but since the handler is at the top already (in the .live case) there is no upper place to bubble to ..

example attempt ..

- document
  - div
    - link

you bind a click event handler to the link (with the bind or click method).

When you click the link, the handler is triggered, but in addition the click event goes up the DOM until it reaches the document, and will also trigger click handlers bound to the div and document. (unless you use the .stopPropagation)

Alternatively if you use the .live method to bind the event handler, it will be bound to the document. If you now click the link, the event (which will not fire right away, since no handler is bound to it) will naturally go up the DOM (triggering the click handlers it encounters). Once it reaches the document it will trigger our own handler. But there is no upper to go, so the stopPropagation is useless at this point.

回复收藏 0 原文

离旧人 2024-11-14 13:16:22

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() 仅在事件已经冒泡后才发挥其魔力，因此阻止事件传播是没有用的 - 为时已晚，它已经到达树的顶部并传播了......

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!"); });

});

Example: http://jsfiddle.net/knr3v/2/

.live() only does its magic once the event has already bubbled, so stopping the event from propagating is useless - it's too late, it has already reached the top of the tree and propagated...

回复收藏 0 原文

~没有更多了~