阻止事件冒泡的兩種方式

1、什么是JS事件冒泡

在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。  

2、阻止方法

方法一：event.stopPropagation( )

<div>
    <p>段落文本內容
        <input type="button" value="點擊" />
    </p>
</div>

// 為所有div元素綁定click事件
$("div").click( function(event){
    alert("div-click");
} );

//為所有p元素綁定click事件
$("p").click( function(event){
    alert("p-click");
} );

//為所有button元素綁定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM樹上
    event.stopPropagation(); // 只執行button的click，如果注釋掉該行，將執行button、p和div的click （同類型的事件）  
} );

方法二：event.target

現在，事件處理程序中的變量event保存着事件對象。而event.target屬性保存着發生事件的目標元素。這個屬性是DOM API中規定的，但是沒有被所有瀏覽器實現 。jQuery對這個事件對象進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。通過.target，可以確定DOM中首先接收到事件的元素（即實際被單擊的元素）。而且，我們知道this引用的是處理事件的DOM元素，所以可以編寫下列代碼：

$(document).ready(function(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })
  
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){//判斷是否是當前綁定事件的元素元素觸發的該事件
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })

此時的代碼確保了被單擊的元素是<div id="switcher"> ，而不是其他后代元素。現在，單擊按鈕不會再折疊樣式轉換器，而單擊邊框則會觸發折疊操作。但是，單擊標簽同樣什么也不會發生，因為它也是一個后代元素。實際上，我們可以不把檢查代碼放在這里，而是通過修改按鈕的行為來達到目標 。