标签：
首先解释一下事件冒泡神什么，
在js中，假如在div中嵌套一个div
如
<style type="text/css"> #box1{width:500px;height:500px;background:#900;} #box2{width:400px;height:400px;background:#090;} #box3{width:300px;height:300px;background:#009;} #box4{width:200px;height:200px;background:#990;} #box5{width:100px;height:100px;background:#099;} </style> <body> <div id="box1"> <div id="box2"> <div id="box3"> <div id="box4"> <div id="box5"> </div> </div> </div> </div> </div> </body>
当你用onclick事件时，当你点击id=‘box4’的div，事件会一直传递到box3，box2，box1，html
这就叫事件的冒泡，有时候不需要冒泡，所以会阻止冒泡。
<script> window.onload =function() { var $=function(_id){return document.getElementById(_id);} document.onclick=function() { alert("点击的document"); } document.body.onclick=function() { alert("点击的body"); } $("box1").onclick=function() { alert("你点击的id为："+this.id +"的div"); } $("box2").onclick=function() { alert("你点击的id为："+this.id +"的div"); } $("box3").onclick=function(e) { e=window.event || e; //IE支持的是windows事件，而标准e事件是chromo额firefox支持 e.stopPropagation(); //阻止冒泡的方法，而ie不支持這个方法，但支持cancelBubble属性 alert("你点击的id为："+this.id +"的div"); } $("box4").onclick=function(e) { //全浏览器兼容的阻止冒泡 e=e ||window.event ; e.stopPropagation?(stopPropagation()):(e.cancelBubble=true); alert("你点击的id为："+this.id +"的div"); } $("box5").onclick=function() { alert("你点击的id为："+this.id +"的div"); } } </script>
firefox，chrome中用的是
stopPropagation()函数来阻止冒泡
ie用的是cancelBubble=ture；這个属性来阻止冒泡
标签：
原文地址：http://www.cnblogs.com/biyongyao/p/5840549.html
