什么是事件冒泡？如何阻止事件冒泡？

什么是事件冒泡？

在一個對象上觸發(fā)某類事件(比如單擊onclick事件)，如果此對象定義了此事件的處理程序，那么此事件就會調(diào)用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理(父級對象所有同類事件都將被激活)，或者它到達了對象層次的最頂層，即document對象(有些瀏覽器是window)。

阻止事件冒泡的方法

·w3c方法是：event.stopPropagation(); 事件處理過程中，阻止冒泡事件，但不會阻止默認行為(跳轉(zhuǎn)至超鏈接)

·IE則是使用event.cancelBubble = true 阻止事件冒泡

·return false; jq里面事件處理過程中，阻止冒泡事件，也阻止默認行為(不跳轉(zhuǎn)超鏈接)

封裝方法：

function bubbles(e){
    var ev = e || window.event;
    if(ev && ev.stopPropagation) {
        //非IE瀏覽器
        ev.stopPropagation();
    } else {
        //IE瀏覽器(IE11以下)
        ev.cancelBubble = true;
    }
    console.log("最底層盒子被點擊了")
}

阻止默認行為：

w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;

封裝：

//假定有鏈接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
    if(e.preventDefault){
    e.preventDefault();
}else{
    window.event.returnValue == false;
    }
}