更改事件的優先級與jQuery

我有以下的html代碼：更改事件的優先級與jQuery

<input type="text" id="theInput" value=""/>  
<a href="#" id="theLink">Click me</a>

我想，當檢測到輸入的變化，在這種情況下進行操作，但只有當用戶沒有在鏈接點擊。我曾經嘗試這樣做：

$('#theLink').live('click', function(){ 
    alert('click'); 
}); 

$('#theInput').live('change', function(){ 
    alert('change'); 
});

但是change總是click之前，當輸入的值改爲執行，是因爲JavaScript事件優先規則，因此只顯示「變」的消息。

只有當輸入值改變並且用戶退出輸入單擊而不是鏈接時，我希望它顯示change。在最後一種情況下，我想顯示click。

該示例是here。

我使用jQuery 1.6.4。

來源

2011-12-29 Pablo

很好的問題！我對這裏的答案感興趣... – Murtaza 2011-12-29 09:45:57

我更新了我的答案，我終於明白了你的問題 – 2011-12-29 10:07:06

據我所知，在每個瀏覽器的blur和change事件後click事件觸發（看看this JSFiddle）。 blur和change的順序在瀏覽器中不同（來源：Nicholas Zakas）。

要解決您的問題，您可以在文檔上聆聽click事件，並將事件的目標與#theLink進行比較。任何點擊事件都會觸發文檔（除非被阻止）。

試試這個：

var lastValue = ''; 

$(document).click(function(event) { 
    var newValue = $('#theInput').val(); 

    if ($(event.target).is('#theLink')) { 
     // The link was clicked 
    } else if (newValue !== lastValue) { 
     // Something else was clicked & input has changed 
    } else { 
     // Something else was clicked but input didn't change 
    } 

    lastValue = newValue; 
});

的jsfiddle：http://jsfiddle.net/PPvG/TTwEG/

來源

2011-12-29 10:06:35 PPvG

似乎有效，但在捕獲頁面中的所有'click'事件時，性能方面我有點擔心。 – Pablo 2011-12-29 10:39:56

@Pablo：用戶是否會點擊太多以至於會產生明顯的差異？ – PPvG 2011-12-29 10:55:26

好的，我終於選擇了類似於您的解決方案的東西。非常感謝你。 JSFiddle的最終解決方案是[here]（http://jsfiddle.net/hTqNr/27/），以防萬一。 – Pablo 2011-12-29 11:54:31

好了，現在我知道了，你可以在這裏做http://jsfiddle.net/hTqNr/19/

來源

2011-12-29 09:55:38

謝謝你的回答。然而，我得到一個錯誤：'不能讀取未定義的屬性數據' – Pablo 2011-12-29 10:36:05

@Pablo抱歉，但小提琴是錯誤的http://jsfiddle.net/hTqNr/19/ – 2011-12-29 10:39:37

好吧，現在我明白了。以前的錯誤發生在使用Chrome瀏覽器時，但適用於Firefox。 – Pablo 2011-12-29 10:43:31

$('#theLink').live('click', function(e){ 
    alert('click'); 
}); 

$('#theInput').live('change', function(e){ 
    //Check if the change events is triggerede by the link 
    if(e.originalEvent.explicitOriginalTarget.data === "Click me"){ 
     //if this is the case trigger the click event of the link 
     $('#theLink').trigger("click"); 
    }else{ 
     //otherwise do what you would do in the change handler 
     alert('change'); 
    } 
});

小提琴，爲什麼你不挑輸入框的值。你必須存儲在準備功能

initialvalue= $('#theInput').val();

輸入框的初始值，然後比較值

$('#theLink').live('click', function(){ 
    var newvalue =$('#theInput').val(); 
     if(newvalue!=initialvalue) { 
      //do something 
     } 

    });

來源

2011-12-29 09:56:28

隨着你的代碼，當值改變並且用戶在鏈接。此外，我想要的是，當用戶點擊鏈接時，我不關心價值變化。 – Pablo 2011-12-29 10:06:44

這兩個事件都將觸發，但在你的例子在onchange事件處理程序的警報時，會引發onmousedown事件發生將會停止onclick事件觸發所需的onmouseup事件。使用console.log將顯示兩個事件觸發。

http://jsfiddle.net/hTqNr/4/

來源

2011-12-29 10:00:40

這是真的。我將編輯該問題。 – Pablo 2011-12-29 10:37:16

更改事件的優先級與jQuery

回答

相關問題