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; //不仅阻止了事件往上冒泡，而且阻止了事件本身 
});