就是當設定了多個div的嵌套時；即建立了父子關係，當父div與子div共同加入了onclick事件時，當觸發了子div的onclick事件後，子div進行相應的js操作。但是父div的onclick事件同樣會被觸發。這就造成了事件的多層併發，導致了頁面混亂。這就是冒泡事件。
消除冒泡事件的方法
阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）
下面的一段代碼即可以很好的解釋是麼是冒泡效果，什麼叫消除冒泡效果
文章來自學IT網：http://www.xueit.com/html/2010-04/33-190414088420104795201625.html
<html>
<head>
<title> 阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event; //判斷瀏覽器的類型，在基於ie內核的瀏覽器中的使用cancelBubble
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault(); //在基於firefox內核的瀏覽器中支持做法stopPropagation
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="parent1" οnclick="alert(this.id)" style="width:250px;background-color:yellow">
<p ID="ASDF" οnclick="alert(this.id)">This is parent1 div.</p>
<div id="child1" οnclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" οnclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" οnclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html> 上面代碼保存後打開當點擊child1時不僅會彈出 child1 對話框還會彈出 parent1
這就是冒泡事件
但是單擊chile2只會彈出child2卻不會彈出 parent2，這便是應用了阻止冒泡事件的特效的效果.
