冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
-
<html xmlns="">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>无标题文档</title>
-
<script src="jquery-1.9.1.min.js"> </script>
-
<script language="javascript">
-
$(function(){
-
// 为span元素绑定click事件
-
$('span').bind("click",function(){
-
var txt = $('#msg').html() + "
内层span元素被点击.
"
;//获取html信息
-
$('#msg').html(txt);// 设置html信息
-
});
-
// 为div元素绑定click事件
-
$('#content').bind("click",function(){
-
var txt = $('#msg').html() + "
外层div元素被点击.
"
;
-
$('#msg').html(txt);
-
});
-
// 为body元素绑定click事件
-
$("body").bind("click",function(){
-
var txt = $('#msg').html() + "
body元素被点击.
"
;
-
$('#msg').html(txt);
-
});
-
})
-
</script>
-
</head>
-
<body>
-
<div id="content">
-
<div>
-
<span>22222</span>
-
</div>
-
</div>
-
<div id="msg"></div>
-
</body>
-
</html>
当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。
如何防止这种冒泡事件发生呢？
修改如下：
-
<script type="text/javascript">
-
$(function(){
-
// 为span元素绑定click事件
-
$('span').bind("click",function(event){
-
var txt = $('#msg').html() + "
内层span元素被点击.
"
;
-
$('#msg').html(txt);
-
event.stopPropagation(); // 阻止事件冒泡
-
});
-
// 为div元素绑定click事件
-
$('#content').bind("click",function(event){
-
var txt = $('#msg').html() + "
外层div元素被点击.
"
;
-
$('#msg').html(txt);
-
event.stopPropagation(); // 阻止事件冒泡
-
});
-
// 为body元素绑定click事件
-
$("body").bind("click",function(){
-
var txt = $('#msg').html() + "
body元素被点击.
"
;
-
$('#msg').html(txt);
-
});
-
})
-
</script>
PS:event.cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器
阅读(449) | 评论(0) | 转发(0) |
