jQuery中阻止冒泡事件的方法介紹_jquery

一、冒泡事件簡介

當我們點選一個控制項的時候，如果包含這個控制項的父控制項也有click事件，則會繼續執行。
例如：div下的a都有click事件，點選a的時候，會alert出現2次。這個現象叫做冒泡事件。

這個事件從原始元素開始一直冒泡到DOM樹的最上層。
目標元素: 任何一個事件的目標元素都是最開始的那個元素，在我們的這個例子中也就是按鈕，
並且它在我們的元素物件中以屬性的形式出現。使用事件代理的話我們可以把事 件處理器加到一個元素上，
等待一個事件從它的子級元素裡冒泡上來，並且可以很方便地得知這個事件是從哪個元素開始。
注意：
blur、focus、load和unload不能像其它事件一樣冒泡。事實上blur和focus可以用事件捕獲而非事件冒泡的方法獲得（在IE之外的其它瀏覽器中）。

二、阻止jQuery事件冒泡

jQuery對DOM的事件觸發具有冒泡特性。有時利用這項特性可以減少重複程式碼，但有時候我們又不希望事件冒泡。這時候就要阻止 jQuery.Event冒泡。

在jQuery.Event的文檔中的開頭得知，jQuery.Event對像是符合W3C標準的一個事件對象，同時jQuery.Event免去了檢查相容IE的步驟。
jQuery.Event提供了一個非常簡單的方法來阻止事件冒泡：event.stopPropagation();

複製代碼 程式碼如下:

$("p").click(function(event){
     event.stopPropagation();
    >

但這個方法對使用live綁定的事件沒有作用，需要一個更簡單的方法阻止事件冒泡：return false;

複製程式碼 程式碼如下:

$(this).after("Another paragraph!");

return false;  });

相容多個瀏覽器的終止冒泡函數：

複製程式碼 程式碼如下:

   function stopDefault(e) {

        //阻止預設瀏覽器動作(W3C)
       ();
        //IE中阻止函數器預設動作的方式
        else
            window.event.returnValue = false;

三、使用event.tatget屬性 明確事件物件


事件處理程序中的變數event保存事件物件。而event.tatget屬性則保存著發生事件的目標元素。這個屬性是DOM API中規定的，但是沒有被所有瀏覽器實作。 jQuery對這個事件物件進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。透過.target，可以確定DOM中首先接收到事件的元素。而且，我們知道this引用的是處理事件的DOM元素。

使用event.tatget屬性 明確事件物件

阻止事件冒泡的程式碼如下：

複製程式碼

程式碼如下:

程式碼如下:$$

$

$
$
$
$ (document).ready(function() {
    $('switcher').click(function(event){
           $('switcher .button').toggleClass('hidden');
        }
    };)
});