Js 冒泡事件阻止實作程式碼_javascript技巧

1. 事件目標

現在，事件處理程序中的變數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');
  }
  })
 })
 

此時的程式碼確保了被點擊的元素是

，而不是其他後代元素。現在，點擊按鈕不會再折疊樣式轉換器，而點擊邊框則會觸發折疊操作。但是，點擊標籤同樣什麼也不會發生，因為它也是一個後代元素。實際上，我們可以不把檢查程式碼放在這裡，而是透過修改按鈕的行為來達到目標 。

2. 停止事件傳播

事件物件也提供了一個.stopPropagation()方法，該方法可以完全阻止事件冒泡。與.target類似，這個方法也是一種純JavaScript特性，但在跨瀏覽器的環境中則無法安全地使用 。不過，只要我們透過jQuery來註冊所有的事件處理程序，就可以放心地使用這個方法。
下面，我們會刪除剛剛新增的檢查語句event.target == this，並在按鈕的點擊處理程序中加入一些程式碼：

複製程式碼 程式碼如下:

$(document).ready(>

$(document).ready(function(){ $('#switcher .button').click(funtion(event){
  //…
   event.stopPropagation();
  })
 })

>

  同以前一樣，需要為用作點選處理程序的函數新增一個參數，以便存取事件物件。然後，透過簡單地呼叫event.stopPropagation()就可以避免其他所有DOM元素回應這個事件。這樣一來，點選按鈕的事件會被按鈕處理，而且只會被按鈕處理。點擊樣式轉換器的其他地方則可以折疊和擴展整個區域。

3. 預設操作

如果我們把點擊事件處理程序註冊到一個錨元素，而不是一個外層的

上，那麼就要面對另一個問題：當使用者點擊連結時，瀏覽器會載入一個新頁面。這種行為與我們討論的事件處理程序不是同一個概念，它是單擊錨元素的預設操作。類似地，當使用者在編輯完表單後按下回車鍵時，會觸發表單的submit事件，在此事件發生後，表單提交才會真正發生。
如果我們不希望執行這種預設操作，那麼在事件物件上呼叫.stopPropagation()方法也無濟於事，因為預設操作不是在正常的事件傳播流中發生的。在這種情況下，.preventDefault()方法則可以在觸發預設操作之前終止事件 。
提示 當在事件的環境中完成了某些驗證之後，通常會用到.preventDefault()。例如，在表單提交期間，我們會對使用者是否填寫了必填字段進行檢查，如果使用者沒有填寫相應字段，那麼就需要阻止預設操作。我們將在第8章詳細討論表單驗證。 事件傳播和預設操作是相互獨立的兩套機制，在二者任何一方發生時，都可以終止另一方。如果想要同時停止事件傳播和預設操作，可以在事件處理程序中傳回false，這是對在事件物件上同時呼叫.stopPropagation()和.preventDefault()的一種簡寫方式。

補充：

複製程式碼

程式碼如下:

//點選按鈕事件（改變文字樣式）
$(document).ready(function() {
   $('#switcher .button').click(function() {
     $('body').removeClass();
     if (this.id == 'switcher-narrow') {
     >     }
     else if (this.id == 'switcher-large') {
       $('body').addClass('large');; #switcher .button').removeClass('selected');
     $(this).addClass('selected');
   });
});
>
//點選按鈕外層div出發事件（隱藏按鈕）
$(document).ready(function() {
   $('#switcher').click(function() {     $('#switcher .button').toggleClass('hidden');

   });
});


現在的問題是，當點擊了按鈕時，同時觸發了隱藏按鈕事件。這是事件冒泡導致。
為了阻止事件冒泡，需要為隱藏按鈕函數增加一個參數：

複製程式碼

程式碼如下: $(document).ready(function() {   $('#switcher').click(function(even) {

     if(even.target==this){

     if(even.target==this){       $('#switcher .button').toggleClass('hidden');
     }
   });
});

   });
}); target屬性保存發生事件的目標元素。可以確定DOM中首先接收到事件的元素。此時程式碼確保了被點擊的是

，而不是其後代元素。

也可以這樣處理，透過修改按鈕的行為來達到目的。

複製程式碼

程式碼如下:$(document).ready(>

$(document).ready(unction() {   $('#switcher .button').click(function(even) {

     $('body').removeClass();
     if (this.id == 'switcher-n>     if (this.id == 'switcher-num  '
       $('body').addClass('narrow');
     }
     else if (this.id == 'switcher-large') { ('large');
     }

     $('#switcher .button').removeClass('selected');
  >     even.stopPropagation();
   });
});




用JS阻止事件冒泡

事件冒泡: 當一個元素上的事件被觸發的時候，比如說滑鼠點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這個過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。

可以用JS來阻止js事件冒泡。因為瀏覽器的差異IE和FF的JS寫法有點不一樣。 IE用cancelBubble=true來阻止而FF下需要用stopPropagation方法。 下一個完整的程式碼：

複製程式碼

程式碼如下:

;
-->

;
-->

;
-->

;
-->

;

點選aaaa會觸發上層的onclick事件，點選bbbb不會觸發上層onclick事件

                                   

aaaa	bbbbb