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

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

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

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

css代碼如下：

 1 div{
 2         width:500px;
 3         height:500px;
 4         background:red;
 5   }
 6  p{
 7         width:200px;
 8         height:200px;
 9         background:blue;
10    }

js代碼如下：

1 function show(info){
2             alert(info);
3 }

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

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

 1 function show(e,info){
 2     function cancelBubble(e){
 3         e = e || window.event;
 4         if (e.stopPropagation) {       
 5                    e.stopPropagation(); 
 6         }else {            
 7                    e.cancelBubble = true; 
 8         } 
 9     }
10     alert(info);
11 }    

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

 1 function show(info){
 2             alert(info);
 3             cancelBubble();
 4 }
 5 function cancelBubble(e) { 
 6             var evt = e ? e : window.event; 
 7                 if (evt.stopPropagation) {        //W3C 
 8                    evt.stopPropagation(); 
 9                 }else {       //IE      
10                    evt.cancelBubble = true; 
11                 }  
12 }

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

好了，問題圓滿解決。