快捷導(dǎo)航

jQuery 事件隊(duì)列調(diào)整方法

更新時(shí)間：2009年09月18日 14:42:17 作者：

如何為已經(jīng)綁定A事件的對(duì)象添加B事件，由B事件判斷A事件是否觸發(fā)

大家都發(fā)現(xiàn)，通過(guò)jQuery綁定事件是件非常容易的事情

<TEXTAREA class=javascript name=code rows=15 cols=50>$("a").click(function(){ 
    console.info("A"); 
    return false; 
}); 
</TEXTAREA> 

但是A事件綁定后，我發(fā)現(xiàn)我需要B事件來(lái)決定其是否觸發(fā)，好辦，現(xiàn)在就改。

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

<TEXTAREA class=javascript name=code rows=15 cols=50>$("a").click(function(){ 
    console.info("B"); 
    return false; 
}); 
$("a").click(function(){ 
    console.info("A"); 
    return false; 
}); 
</TEXTAREA>

真的能夠阻止后面的click事件觸發(fā)嗎？事與愿違。
如果B事件需要通過(guò)異步調(diào)用來(lái)判斷A事件是否需要觸發(fā)呢？

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

<TEXTAREA class=javascript name=code rows=15 cols=50>$("a").click(function(){ 
    $.ajax({ 
        url:"b.html", 
        success:function(msg){ 
            if(msg){ 
                console.info("pass"); 
                return true; 
            }else{ 
                console.info("nopass"); 
                return false; 
            } 
        } 
    }); 
}); 
$("a").click(function(){ 
    console.info("B"); 
    return false; 
}); 
</TEXTAREA> 

事實(shí)發(fā)現(xiàn)根本不可能，那怎么辦呢？
先說(shuō)幾種思路：
將后綁定的事件通過(guò)另外一種觸發(fā)，比如A事件是綁定在click上，那么B事件綁定在mouseover上，先觸發(fā)mouseover再通過(guò)它來(lái)阻止click事件。（后來(lái)經(jīng)過(guò)研究，發(fā)現(xiàn)這幾乎是不可能的事情）
將2個(gè)事件通過(guò)jquery的queue進(jìn)行處理。（這個(gè)確實(shí)可以解決先后觸發(fā)的問(wèn)題，但是現(xiàn)實(shí)的情況是項(xiàng)目中所有的事件綁定已經(jīng)全部寫(xiě)好，目前需要每個(gè)按鈕事件前都加上1個(gè)判斷的AJAX請(qǐng)求。要不就是所有的按鈕事件全部重寫(xiě)，要么另外尋找一條路）
深入jQuery的事件機(jī)制，獲得其事件的隊(duì)列，針對(duì)其事件隊(duì)列進(jìn)行處理。

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

<TEXTAREA class=javascript name=code rows=15 cols=50>//我們先讓其默認(rèn)綁定個(gè)事件，稱(chēng)其為A事件 
$("a").click(function(){ 
    console.info(1); 
    return false; 
}); 
//現(xiàn)在我們要讓后面綁定的B事件先觸發(fā)，并且控制A事件是否觸發(fā) 
//獲取對(duì)象a綁定的事件對(duì)象中的click事件 
var event = $("a").data("events").click; 
//因?yàn)檫@個(gè)a在我們的B事件中也需要用到，為了防止this對(duì)象的改變，因此特地聲明變量that保存 
var that = $("a"); 
//下面就是B事件了,但是貌似好像沒(méi)有綁定啊 
var B = function(){ 
    $.ajax({ 
        url:"b.html", 
        success:function(msg){ 
            if(msg){ 
                console.info("pass"); 
                tt.call(that); 
            }else{ 
                console.info("nopass"); 
            } 
        } 
    }); 
return false; 
}; 
//關(guān)鍵對(duì)象，盡請(qǐng)對(duì)其多關(guān)注 
var tt; 
//關(guān)鍵代碼，盡請(qǐng)多關(guān)注 
for(var i in event){ 
    tt = event[i]; 
    event[i] = B;//如果注釋此行，下面2行必須取消注釋。效果一樣，原理不同... 
//delete(event[i]); 
    //that.click(B); 
    break; 
} 
</TEXTAREA>