JS阻止事件冒泡和取消默认事件

什么是事件流？

浏览器最初开始支持事件时，同一个事件仅仅只有一个元素相应。后来认为仅仅支持一个单一事件是不够的，而IE4之后提出了事件流的概念，一个元素可以支持多个事件。常见的事件流有冒泡型事件和捕捉型事件。

 事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件 ；需要注意的是IE浏览器不支持捕获类型事件；相反的，事件冒泡是自下而上的去触发事件

添加事件监听时阻止冒泡

绑定事件方法 addEventListener 的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。

// 阻止冒泡前 

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发");
})
document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发")
})
 
//  阻止冒泡后

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发");
},true)
document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发")
},true)

直接绑定事件时阻止冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

<div id='div' onclick='alert("div");'>
  <ul onclick='alert("ul");'>
     <li onclick='alert("li");'>test</li>
  </ul>
</div>

// 先触发li; 再触发ul; 然后触发div

 阻止冒泡

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) {
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
} else { 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

取消默认事件

默认行为即标签本身自带的行为，如<a>标签的默认跳转、<input type="submit" >等

<a href="http://www.baidu.com/" id="test" >百度一下，你就知道</a>


var a = document.getElementById("test");
a.onclick =function(e){
     if(e && e.preventDefault){
          e.preventDefault();    //  W3C取消默认事件
      }else{
          window.event.returnValue == false;  //IE中阻止函数器默认动作的方式 
      }
}


//  或者可以使用return false

a.onclick = function(){
    return false;
};