jquery处理事件冒泡

<div class="foo">
<!-- lang: html -->
<span class="bar">
<!-- lang: html -->
<a href="http://www.example.cm/“>
<!-- lang: html -->
</a>
<!-- lang: html -->
</span>
<!-- lang: html -->
<p>
<!-- lang: html -->
</p>
<!-- lang: html -->
</div>

但我们点击了<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();