如何調整jQuery中的事件隊列

大家都發現,通過jQuery綁定事件是件非常容易的事情

$("a").click(function(){
	console.info("A");
	return false;
});

 但是A事件綁定後,我發現我需要B事件來決定其是否觸發,好辦,現在就改。

$("a").click(function(){
	console.info("B");
	return false;
});
$("a").click(function(){
	console.info("A");
	return false;
});

 真的能夠阻止後面的click事件觸發嗎?事與願違。

如果B事件需要通過異步調用來判斷A事件是否需要觸發呢?

$("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;
});

 事實發現根本不可能,那怎麼辦呢?

先說幾種思路:

  1. 將後綁定的事件通過另外一種觸發,比如A事件是綁定在click上,那麼B事件綁定在mouseover上,先觸發mouseover再通過它來阻止click事件。(後來經過研究,發現這幾乎是不可能的事情)
  2. 將2個事件通過jquery的queue進行處理。(這個確實可以解決先後觸發的問題,但是現實的情況是項目中所有的事件綁定已經全部寫好,目前需要每個按鈕事件前都加上1個判斷的AJAX請求。要不就是所有的按鈕事件全部重寫,要麼另外尋找一條路)
  3. 深入jQuery的事件機制,獲得其事件的隊列,針對其事件隊列進行處理。
//我們先讓其默認綁定個事件,稱其爲A事件
$("a").click(function(){
	console.info(1);
	return false;
});
//現在我們要讓後面綁定的B事件先觸發,並且控制A事件是否觸發
//獲取對象a綁定的事件對象中的click事件
var event = $("a").data("events").click;
//因爲這個a在我們的B事件中也需要用到,爲了防止this對象的改變,因此特地聲明變量that保存
var that = $("a");
//下面就是B事件了,但是貌似好像沒有綁定啊
var B = function(){
	$.ajax({
		url:"b.html",
		success:function(msg){
			if(msg){
				console.info("pass");
				tt.call(that);
			}else{
				console.info("nopass");
			}
		}
	});        
        return false;
};
//關鍵對象,盡請對其多關注
var tt;
//關鍵代碼,盡請多關注
for(var i in event){
	tt = event[i];
	event[i] = B;//如果註釋此行,下面2行必須取消註釋。在FF中效果一樣,原理不同...在IE中會循環調用...
 //delete(event[i]); //that.click(B); break; }

 問題貌似圓滿解決,但是AJAX的callback函數中的return,是否可以抓的到呢?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章