如果子元素和父元素都有点击事件，会出现点击事件冒泡的情况。
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