事件冒泡和事件捕获

        


事件冒泡：
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:

    
        按钮
    

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; 
   }
}