在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，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>