如果子元素和父元素都有點擊事件，會出現點擊事件冒泡的情況。
1.如何避免冒泡：
html：
<html> <head></head> <body> <div class="title login" style="color: #fff;font-size: 14px" id="personalInfo"> 你好, <span style="color:#fff;font-size: 14px " id="login_name_span">戰無不勝</span> <span style="color:#fff;font-size: 14px;margin-left: 4px " id="UserLogout">[注銷]</span> </div> </body> </html>
js
方法1：
UserLogout.onclick=function (e) { e.stopPropagation();//阻止事件冒泡即可
//e.cancelBubble=true;//非標准的IE方式:; 這里的cancelBubble是 IE事件對象的屬性，設為true就可以了
}
方法2：
UserLogout.onclick=function (e) { //事件處理代碼 //實際上是終結了這個（點擊）事件，冒泡當然也就停止了。 return false; }
2.關於事件冒泡
事件冒泡 ：當一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級，一直到window 。（注意這里傳遞的僅僅是事件 並不傳遞所綁定的事件函數。所以如果父級沒有綁定事件函數，就算傳遞了事件 也不會有什么表現 但事件確實傳遞了。）
<html> <head></head> <body> var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div2.onclick = function(){alert(1);}; div1.onclick = function(){alert(2);};//父親 //html代碼 <div id="div1"> <div id="div2"> </div> </div> </body> </html>
當我們在div2里面點擊的時候，會發現彈出了一次1，接着又彈出了2，這說明點擊的時候，不僅div2的事件被觸發了，它的父級的點擊事件也觸發了，這種現象就叫做冒泡。
冒泡還有一大優點，就是事件委托，而且經常用到，還能提高很大的性能，詳情見：https://www.cnblogs.com/vickylinj/p/10940067.html