js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数。
如下例所示:
-
<html>
-
<head>
-
-
</head>
-
-
<body>
-
<div id ='outer' onclick="alert('外层')">
-
外层
-
<div id ='mid' onclick="alert('中间')">
-
中间
-
<div id ='inner' onclick="alert('里层')">
-
里层
-
<div>
-
</div>
-
-
-
</div>
-
-
-
</body>
-
</html>
当你点击里层的时候,会依次弹出‘里层’,‘中间’和‘外层’。这就是事件冒泡。
从直观上来看,也是这样的,因为最里层的区域是在父级节点中的,点击了子级节点的区域,其实也是点击了父级节点的区域,所以事件会传播起来。
其实,很多的时候,我们并不想事件冒泡,因为这样会同时触发几个事件。阻止事件冒泡的方法如下所示。
-
<html>
-
<head>
-
-
</head>
-
-
<body>
-
<div id ='outer' onclick="alert('外层')">
-
外层
-
<div id ='mid' onclick="alert('中间')">
-
中间
-
<a id ='inner' href=''>
-
里层
-
</a>
-
</div>
-
-
-
</div>
-
<script>
-
document.getElementById('inner').onclick=function(e){
-
alert('里层');
-
stopBubble(e)
-
}
-
-
//阻止冒泡时间方法,兼容ie(e.cancleBubble)和ff(e.stopProgation)
-
function stopBubble(e){
-
-
var evt = e||window.event;
-
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
-
evt.preventDefault();//阻止浏览器默认行为,这样链接就不会跳转
-
}
-
-
-
-
</script>
-
</body>
-
</html>
阅读(6075) | 评论(0) | 转发(0) |