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>
阅读(6062) | 评论(0) | 转发(0) |
