在默認情況下，發生在一個子元素上的單擊事件（或者其他事件），如果在其父級元素綁定了一個同樣的事件，此時點擊子元素，click事件會首先被子元素捕獲，執行綁定的事件程序，之後會被父級元素捕獲，再次激發一段腳本的執行，這就是所謂的“事件冒泡”。
看個例子：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
<div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我點擊了obj1');
}
obj2.onclick = function(e){
alert('我點擊了obj2');
}
</script>
</body>
</html>
在通常情況下，我們只希望事件發生在它的目標而並非它的父級元素上，只需加個stopBubble方法，即可取消事件冒泡，詳見以下代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
<div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡的通用函數
function stopBubble(e){
// 如果傳入了事件對象，那麼就是非ie瀏覽器
if(e&&e.stopPropagation){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否則我們使用ie的方法來取消事件冒泡
window.event.cancelBubble = true;
}
}
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我點擊了obj1');
}
obj2.onclick = function(e){
alert('我點擊了obj2');
stopBubble(e);
}
</script>
</body>
</html>
現在你可能想知道，什麼時候需要阻止事件冒泡？事實上，現在絕大多數情況下都可以不必在意它。但是當你開始開發動態應用程序（尤其是需要處理鍵盤和鼠標）的時候，就有這個必要了。
原文出自：http://www.cnblogs.com/zhenn/archive/2011/02/19/1958748.html