何為冒泡事件
就是當設定了多個div的巢狀時；即建立了父子關係，當父div與子div共同加入了onclick事件時，當觸發了子div的onclick事件後，子div進行相應的js操作。但是父親div的onclick事件同樣會被觸發。這就造成了事件的多層並發，導致了頁面混亂。這就是冒泡事件。
消除冒泡事件的方法
阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）
下面的一段程式碼可以很好的解釋是麼是冒泡效果，什麼叫消除冒泡效果
複製代碼代碼如下:
<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" onclick="alert(this.id)">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>
把程式碼直接複製後，開啟點擊child1時不僅會跳出child1 對話方塊還會跳出parent1
這就是冒泡事件
但點擊chile2只會彈出child2卻不會彈出parent2，這便是應用了阻止冒泡事件的特效的效果.