今天整理筆記，發現在學習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.將阻止事件冒泡的代碼封裝成了一個函數，可以多次調用。
好了，問題圓滿解決。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
