快捷導(dǎo)航

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

更新時(shí)間：2014年04月12日 10:49:17 作者：

這篇文章主要介紹了jQuery中阻止冒泡事件的方法介紹,需要的朋友可以參考下

一、冒泡事件簡(jiǎn)介

當(dāng)我們點(diǎn)擊一個(gè)控件的時(shí)候，如果包括這個(gè)控件的父控件也有click事件，則會(huì)繼續(xù)執(zhí)行。
比如：div下的a都有click事件，點(diǎn)擊a的時(shí)候，會(huì)alert出現(xiàn)2次。這個(gè)現(xiàn)象叫做冒泡事件。

這個(gè)事件從原始元素開(kāi)始一直冒泡到DOM樹(shù)的最上層。
目標(biāo)元素: 任何一個(gè)事件的目標(biāo)元素都是最開(kāi)始的那個(gè)元素，在我們的這個(gè)例子中也就是按鈕，
并且它在我們的元素對(duì)象中以屬性的形式出現(xiàn)。使用事件代理的話我們可以把事件處理器添加到一個(gè)元素上，
等待一個(gè)事件從它的子級(jí)元素里冒泡上來(lái)，并且可以很方便地得知這個(gè)事件是從哪個(gè)元素開(kāi)始。
注意：
blur、focus、load和unload不能像其它事件一樣冒泡。事實(shí)上blur和focus可以用事件捕獲而非事件冒泡的方法獲得（在IE之外的其它瀏覽器中）。

二、阻止jQuery事件冒泡

jQuery對(duì)DOM的事件觸發(fā)具有冒泡特性。有時(shí)利用這一特性可以減少重復(fù)代碼，但有時(shí)候我們又不希望事件冒泡。這個(gè)時(shí)候就要阻止 jQuery.Event冒泡。

在jQuery.Event的文檔中的開(kāi)頭得知，jQuery.Event對(duì)象是符合W3C標(biāo)準(zhǔn)的一個(gè)事件對(duì)象，同時(shí)jQuery.Event免去了檢查兼容IE的步驟。
jQuery.Event提供了一個(gè)非常簡(jiǎn)單的方法來(lái)阻止事件冒泡：event.stopPropagation();

復(fù)制代碼代碼如下:

$("p").click(function(event){
     event.stopPropagation();
     // do something
})

但是這個(gè)方法對(duì)使用live綁定的事件沒(méi)有作用，需要一個(gè)更簡(jiǎn)單的方法阻止事件冒泡：return false;

復(fù)制代碼代碼如下:

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

return false; });

兼容多個(gè)瀏覽器的終止冒泡函數(shù)：

復(fù)制代碼代碼如下:

   function stopDefault(e) {
        //阻止默認(rèn)瀏覽器動(dòng)作(W3C)
        if (e && e.preventDefault)
            e.preventDefault();
        //IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式
        else
            window.event.returnValue = false;
        return false;
    }

三、使用event.tatget屬性明確事件對(duì)象

事件處理程序中的變量event保存著事件對(duì)象。而event.tatget屬性保存著發(fā)生事件的目標(biāo)元素。這個(gè)屬性是DOM API中規(guī)定的，但是沒(méi)有被所有瀏覽器實(shí)現(xiàn)。jQuery對(duì)這個(gè)事件對(duì)象進(jìn)行了必要的擴(kuò)展，從而在任何瀏覽器中都能夠使用這個(gè)屬性。通過(guò).target，可以確定DOM中首先接收到事件的元素。而且，我們知道this引用的是處理事件的DOM元素。

使用event.tatget屬性明確事件對(duì)象

阻止事件冒泡的代碼如下：

復(fù)制代碼代碼如下:

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

您可能感興趣的文章: