阻止冒泡与阻止默认行为

Posted 2020-09-11 非凡。

 

 

<div id="aaa" style="width:500px;height:300px;background: red;text-align: center;">

    <div id="bbb" style="width:300px;height:200px;background: pink;">
         <div id="ccc" style="width:200px;height:100px;background: green;"></div>
    </div>
</div>

<a href="http://www.baidu.com" id="link"> 百度一下</a>

<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var link=$("link");

var btn=$("btn");
var divs=document.getElementsByTagName("div");

 

//（1）.阻止冒泡
function bindEvent(obj,type,fun){ //经典封装事件
    if(obj.addEventListener){//判断是否标准浏览器DOM2级事件模型
        obj.addEventListener(type,fun,false);                                        //注：false为冒泡→从里面到外面，true为捕获→从外面到里面
    }
    else if(obj.attachEvent){//判断是否IE浏览器DOM2级事件模型
        obj.attachEvent("on"+type,fun);
    }
    else{                          //DOM0级事件模型
        obj["on"+type]=fun;
    }
}
function stopBubble(ev){   //阻止冒泡；
    var e=event||ev;  //浏览器兼容
    if(e.stopPropagation){
        e.stopPropagation();
    }
    else{
        e.cancelBubble=true;
    }
}
for(var i=0;i<divs.length;i++){ 
    bindEvent(divs[i],"click",function(ev){
        alert(this.id);
        stopBubble(ev); //调用
    })
}

 

   //(2) 阻止默认事件

function prevent(ev){ //阻止默认事件；
    var e=event||ev;
    if(e.preventDefault){
        e.preventDefault();
    }
    else{
        window.event.returnValue=false;
    }
}

link.onclick=function(ev){ //调用
    prevent(ev);
}

</script>