在點擊div中的p時，如何阻止事件冒泡？

今天整理筆記，發現在學習javaScript的過程中，遇到過一個在當時看來很棘手的問題，現在特地總結一下，也希望能幫助到曾像我一樣迷惘的初學者。

我還是以一個案例來說明問題，html代碼如下：

<div onclick="show('a')">
        <p onclick="show('b')"></p>
 </div>

css代碼如下：

div{
        width:500px;
        height:500px;
        background:red;
  }
 p{
        width:200px;
        height:200px;
        background:blue;
   }

js代碼如下：

function show(info){
            alert(info);
}

稍微懂點js的人都知道當我點擊p時，基於事件冒泡機制，會觸發父元素div的onclick事件，結果是先彈出b、再彈出a。

那么問題來了，如何修改show()這個函數而只彈出b？我第一次的解決方法是（各位大神勿噴）：

function show(e,info){
    function cancelBubble(e){
        e = e || window.event;
        if (e.stopPropagation) {       
                   e.stopPropagation(); 
        }else {            
                   e.cancelBubble = true; 
        } 
    }
    alert(info);
}    

結果老是報錯。我就開始各種百度，最終解決方法如下：

function show(info){
            alert(info);
            cancelBubble();
}
function cancelBubble(e) { 
            var evt = e ? e : window.event; 
                if (evt.stopPropagation) {        //W3C 
                   evt.stopPropagation(); 
                }else {       //IE      
                   evt.cancelBubble = true; 
                }  
}

至於為什么這樣？我分析的是這樣做有兩個好處：1.阻止了事件冒泡，達到只彈出b目的; 2.將阻止事件冒泡的代碼封裝成了一個函數，可以多次調用。

好了，問題圓滿解決。