防止事件冒泡

来源:互联网 发布:路径规划算法 编辑:程序博客网 时间:2024/06/06 07:26

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

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

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

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

————————————————————————————————-

js:

<script type=”text/javascript”>
$(function(){
$(document).click(function(){
alert(111);
$(“#div1″).hide();
});
$(‘#btn1′).click(function(){
$(‘#div1′).toggle();
})
});
</script>

html:

<input id=”btn1″ type=”button” value=”显示”>
<div id=”div1″></div>

————————————————————————————————-

点击“显示”按钮看,都会触发alert(111);

为了防止触发document。

————————————————————————————————-

js:

<script type=”text/javascript”>
$(function(){
$(document).click(function(){
alert(111);
$(“#div1″).hide();
});
$(‘#btn1′).click(function(event){
$(‘#div1′).toggle();

//jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation();
event.stopPropagation();   // 同等       return false;
})
});
</script>

————————————————————————————————-

2、一个更简单的方法阻止事件冒泡:return false;

0 0
原创粉丝点击