首页 > 代码库 > js时间冒泡，阻止事件冒泡
js时间冒泡，阻止事件冒泡
首先解释一下事件冒泡神什么，
在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；這个属性来阻止冒泡
js时间冒泡，阻止事件冒泡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。