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；這个属性来阻止冒泡

 

posted @ 2016-09-04 22:22  MrPat  阅读(829)  评论(0)  编辑  收藏  举报