阻止jQuery事件冒泡

日期：2009-10-06 | 作者： Allen

jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码，但有时候我们又不希望事件冒泡。这个时候就要阻止jQuery.Event冒泡。

在jQuery.Event的文档中的开头得知，jQuery.Event对象是符合W3C标准的一个事件对象，同时jQuery.Event免去了检查兼容IE的步骤。

jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：event.stopPropagation();

$("p").click(function(event){
    event.stopPropagation(); // do something
})

但是这个方法对使用live绑定的事件没有作用，需要一个更简单的方法阻止事件冒泡：return false;

$("p").live("click", function(){
    $(this).after("Another paragraph!");
    return false;
});

分类：我说你听 | 5 条评论 »

也许你还会喜欢

1 charley 十月 9th, 2009 at 12:37 下午

代码格式很好看

回复

Allen十月 9th, 2009 at 9:37 下午

一个叫SyntaxHighlighter的Wordpress插件，快转到Wordpress吧，哈哈。

回复
2 牛腩十一月 27th, 2009 at 11:56 上午

太棒了。。正好需要用到这个。。原来只是return false;这么简单啊。。呵呵。。多谢楼主了。。。

回复
3 wayne 十二月 3rd, 2010 at 10:27 上午

if(window.event) {
event.cancelBubble = true;//IE
}else {
event.stopPropagation();// 其它浏览器下阻止冒泡
}
在ie下药这么处理。
不过live的情况我还没有办法。

回复
4 javascript和jquery如何防止事件冒泡 » Terry's Blog 六月 24th, 2011 at 7:21 上午

[...] // –></script> < / head> < body > < div style = ” background-color:Azure; ” mce_style = ” background-color:Azure; ” > 目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD < / div> < table > < tr onclick = ” ClickTr(); ” > < td onclick = ” ClickTd(); ” > AAA < / td> < td > BBB < / td> < / tr> < / table> < / body> < / html> 2.方法在IE下解决问题很简单，用onMouseEnter、onMouseLeave 来代替onMouseOver、onMouseOut就行了，他们的作用基本相同，前者不会发生冒泡。但是firefox下没有这两个事件. 3.方法: window.event.cancelBubble = true (IE) event.stopPropagation() event.preventDefault() (Firefox) 阻止jQuery事件冒泡 [...]