<div class="foo">
<!-- lang: html -->
<span class="bar">
<!-- lang: html -->
<a href=http://www.mamicode.com/"http://www.example.cm/“>> 
但我们点击了<a>，这三个元素都处在用户的鼠标指针之下，而
 
元素则与这次交互操作无关。
 
事件捕获是首先交给最外层的元素处理，然后一层一层传到
 
 
另一种相反的策略是最具体的元素先获得响应机会，然后再冒泡到更一般的元素。
 
解决的办法：
 
例子：
 
<div id="container">
<!-- lang: html -->
  <div id="switcher">
<!-- lang: html -->
        <h3>Style Switcher</h3>
<!-- lang: html -->
        <div class="button selected" id="switcher-default">
<!-- lang: html -->
          Default
<!-- lang: html -->
        </div>
<!-- lang: html -->
        <div class="button" id="switcher-narrow">
<!-- lang: html -->
          Narrow Column
<!-- lang: html -->
        </div>
<!-- lang: html -->
        <div class="button" id="switcher-large">
<!-- lang: html -->
          Large Print
<!-- lang: html -->
        </div>
<!-- lang: html -->
      </div>
 <!-- lang: html -->
      </div>
 
1、事件目标
 
$(‘#switcher‘).click(function(event){ 
if(event.target == this){ 
$(‘#switcher .button‘).toggleClass(‘hidden‘); 
} 
})
 
确保被单击的元素是
 
 

   ，而不是外面的元素 
  
 
  
2、下面的这种方法，虽然在跨浏览器中无法安全的使用，只要通过jquery来注册所有的事件就可以放心的使用。 
$(document).ready(function() { 
$(‘#switcher .button‘).click(function(event) {
 
  
$(‘body‘).removeClass();
 if (this.id == ‘switcher-narrow‘) {
  $(‘body‘).addClass(‘narrow‘);
}
 else if (this.id == ‘switcher-large‘) {
  $(‘body‘).addClass(‘large‘);
 }
 
  
$(‘#switcher .button‘).removeClass(‘selected‘);
 
  
$(this).addClass(‘selected‘);
event.stopPropagation();   //避免其他所有的DOM元素响应这个事件，这样单击的事件只会被按钮处理。
 
  
}); 
});
 
  
默认是冒泡，如果取消冒泡可以采用： 
cancelBubble=true 
或者jquery的event.stopPropagation();
 
 
jquery处理事件冒泡