jQuery 事件隊列調整方法

2019-11-21 01:08:04

字體：大中小

來源：轉載

供稿：網友

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

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

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

復制代碼代碼如下:

<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事件觸發嗎？事與愿違。
如果B事件需要通過異步調用來判斷A事件是否需要觸發呢？

復制代碼代碼如下:

<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> 

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

復制代碼代碼如下:

<TEXTAREA class=javascript name=code rows=15 cols=50>//我們先讓其默認綁定個事件，稱其為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行必須取消注釋。效果一樣，原理不同... 
//delete(event[i]); 
    //that.click(B); 
    break; 
} 
</TEXTAREA>