js事件(Event)之（三）阻止事件冒泡

前續：本文來自於網絡文章整理，僅供參考，歡迎糾錯指正。

JS事件流其中一種是冒泡事件，當一個元素被觸發一個事件時，該目標元素的事件會優先被執行，然后向外傳播到每個祖先元素，恰如水里的一個泡泡似的，從產生就一直往上浮，到在水平面時，它才消失。在這個過程中，如果你只希望事件發生在目標元素，而不想它傳播到祖先元素上去，那么你需要在“泡泡”離開對象之前刺破它。

js做法：

function stopPropagation(e) {  
    e = e || window.event;  
    if(e.stopPropagation) { //W3C阻止冒泡方法  
        e.stopPropagation();  
    } else {  
        e.cancelBubble = true; //IE阻止冒泡方法  
    }  
} 

或者如下:

function stopPro(evt){ 
    var e = evt || window.event; 
    //returnValue如果設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置為 fasle， 
    //可以取消發生事件的源元素的默認動作。 
    //window.event?e.returnValue = false:e.preventDefault();//默認事件 
    window.event?e.cancelBubble=true:e.stopPropagation(); 
} 

jQuery做法：

方式一：event.stopPropagation();

$("#div1").mousedown(function(event){ 
    event.stopPropagation(); //阻止冒泡事件，上級的xxx事件不會被調用，但不阻止事件本身
}); 

方式二：return false;

$("#div1").mousedown(function(event){ 
    return false; //不僅阻止了事件往上冒泡，而且阻止了事件本身 
});