事件冒泡和事件捕获

<div id="id">
        <p id="p"></p>
</div>
事件冒泡:
var btnId = document.getElementById("id");
var btnP = document.getElementById("p");
btnId.addEventListener("click",function(){
          alert("后");
},false);
btnP.addEventListener("click",function(){
          alert("先");
},false);
执行顺序:alert("先") 再alert("后")
事件捕获:
var btnId = document.getElementById("id");
var btnP = document.getElementById("p");
btnId.addEventListener("click",function(){
          alert("后");
},false);
btnP.addEventListener("click",function(){
          alert("先");
},false);
执行顺序:alert("后") 再alert("先")

一下借鉴自:https://www.zhihu.com/search?type=content&q=window.event%3F%20window.event.cancelBubble%20%3D%20true%20%3A%20e.stopPropagation()%3B
阻止冒泡事件:

以后阻止冒泡就用这个方法:


function stopEvent(event){
            window.event? window.event.cancelBubble = true : event.stopPropagation();   //w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true
         }

取消冒泡用这个:

function calceEvent(event){
            window.event? window.event.cancelBubble = false : preventDefault();  //w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;
         }
html:
<div onclick="show2();">
    <button onclick="show1(event)">
        按钮
    </button>
</div>
js:     在原生js中return false只能阻止默认行为,无法阻止冒泡事件
         function stopEvent(event){
            return false;
         }     
    function show1(ev){
        alert(1);
        stopEvent(ev);
    }
    function show2(){
        alert(2);
    }
但是在jquery中,return false可以阻止默认行为,也可以阻止冒泡事件
$("#testC").on('click',function(){
    return false;
});

1总结

作者:李斌
链接:https://zhuanlan.zhihu.com/p/31759394
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

总结使用方法当需要停止冒泡行为时,可以使用function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if ( e && e.stopPropagation ) {
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
}else {
    //否则,我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}
当需要阻止默认行为时,可以使用//code from http://caibaojian.com/javascript-stoppropagation-preventdefault.html
//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) {
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    }else {
        window.event.returnValue = false; 
    return false; 
   }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容