jQuery中的冒泡机制的一个注意点

  jQuery中可用于事件代理的函数有 .live(), .delegate(), .on()等,其中.live()在jQuery早期版本中就存在了,但是由于其存在的诸多问题(具体可查看官方文档),现已不推荐使用。总的来说,delegate()和on()差不多是等效的,只不过on()是1.7版本新添加的,官方可能以后会优先发展on()的扩展功能。

  而在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 propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

  它所针对的是事件代理机制中的事件重复和冲突的问题。

  举个例子,如下HTML代码:

<body>
<div>
PURPLESECOND.COM
<p>www.<a>purplesecond.com</a></p>
</div>

<span id='s1'></span>
<span id='s2'></span>
</body>

  然后用JavaScript给<div>设置事件代理,监视<p>中文字有没有被点击。这本身没有问题,但假如我再给<a>添加一个点击事件,问题就来了,因为<a>包含在<p>里,当点击purplesecond.com的时候,是不是两个事件都触发了呢?现在只是两个事件,冒泡链也比较短,没什么大问题,假如冒泡链包含数十个tag,数十个事件呢?一次点击就触发数十次callback函数,这一般不是我们所期望的。这种情况下,就可以运用上述引用文档中所提到的event.stopPropagation()或者return false了。

  JavaScript代码如下,让我们进行一次对比:

var sa=1,sb=1;
$('div').delegate('p','click',function(){
  $('#s1').html('www.:'+sa++);
});
$('a').click(function(event){
  event.stopPropagation(); //两次对比中,一次没有这句代码,另一次含有。
  $('#s2').html('purplesecond.com:'+sb++);
});

  最初的显现效果如下:

PURPLESECOND.COM
www.purplesecond.com

  一、当没有event.stopPropagaton()时

  1.点击www.

PURPLESECOND.COM
www.purplesecond.com
www.:1

  2.点击purplesecond.com

PURPLESECOND.COM
www.purplesecond.com
www.:2 purplesecond.com:1

  3.再点击purplesecond.com

PURPLESECOND.COM
www.purplesecond.com
www.:3 purplesecond.com:2

  可以看到两个事件都被触发了,所以点击purplescond.com后,www.的次数也被加1


  二、当含有event.stopPropagaton()时

  1.点击www.

PURPLESECOND.COM
www.purplesecond.com
www.:1

  2.点击purplesecond.com

PURPLESECOND.COM
www.purplesecond.com
www.:1 purplesecond.com:1

  3.再点击purplesecond.com

PURPLESECOND.COM
www.purplesecond.com
www.:1 purplesecond.com:2

  可以看到点击purplesecond.com不会触发由div代理的点击事件


 

 

posted @ 2012-03-01 15:49  JulianHere  阅读(245)  评论(0编辑  收藏  举报