Js 冒泡事件阻止

1. 事件目标

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

$(document).ready(function(){

 $('#switcher').click(function(event){

  $('#switcher .button').toggleClass('hidden');

  })

 })

  if(event.target==this){

  }

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

2. 停止事件傳播

事件對象還提供了一個.stopPropagation()方法，該方法可以完全阻止事件冒泡。與.target類似，這個方法也是一種純JavaScript特性，但在跨浏覽器的環境中則無法安全地使用 。不過，隻要我們通過jQuery來注冊所有的事件處理程式，就可以放心地使用這個方法。

下面，我們會删除剛才添加的檢查語句event.target == this，并在按鈕的單擊處理程式中添加一些代碼：

 $('#switcher .button').click(funtion(event){

  //……

   event.stopPropagation();

 }) 

  同以前一樣，需要為用作單擊處理程式的函數添加一個參數，以便通路事件對象。然後，通過簡單地調用event.stopPropagation()就可以避免其他所有DOM元素響應這個事件。這樣一來，單擊按鈕的事件會被按鈕處理，而且隻會被按鈕處理。單擊樣式轉換器的其他地方則可以折疊和擴充整個區域。

3. 預設操作

如果我們把單擊事件處理程式注冊到一個錨元素，而不是一個外層的<div>上，那麼就要面對另外一個問題：當使用者單擊連結時，浏覽器會加載一個新頁面。這種行為與我們讨論的事件處理程式不是同一個概念，它是單擊錨元素的預設操作。類似地，當使用者在編輯完表單後按下Enter鍵時，會觸發表單的submit事件，在此事件發生後，表單送出才會真正發生。

如果我們不希望執行這種預設操作，那麼在事件對象上調用.stopPropagation()方法也無濟于事，因為預設操作不是在正常的事件傳播流中發生的。在這種情況下，.preventDefault()方法則可以在觸發預設操作之前終止事件 。

提示 當在事件的環境中完成了某些驗證之後，通常會用到.preventDefault()。例如，在表單送出期間，我們會對使用者是否填寫了必填字段進行檢查，如果使用者沒有填寫相應字段，那麼就需要阻止預設操作。我們将在第8章詳細讨論表單驗證。

事件傳播和預設操作是互相獨立的兩套機制，在二者任何一方發生時，都可以終止另一方。如果想要同時停止事件傳播和預設操作，可以在事件處理程式中傳回false，這是對在事件對象上同時調用.stopPropagation()和.preventDefault()的一種簡寫方式。