2012-12-18 83 views
3

我見過許多地方是jQuery的一個選擇更改事件只能在模糊或點擊鼠標火,但是當我嘗試一下,本次活動還激發每個箭頭按鍵。我試圖在使用箭頭選擇選項時使更改事件不會觸發。例如:jQuery的變化事件觸發的選擇,當箭頭按下

<select size="4" id="more" name="more" required="required"> 
    <option value="0">No</option> 
    <option value="1">Yes</option> 
    <option value="2">Maybe</option> 
    <option value="3">No clue</option> 
</select> 

$('#more').on('change', function(event){ 
    alert('hi'); 
});​ 

這撥弄演示活動時,射擊: http://jsfiddle.net/McWatt/x5cTr/7/

據jQuery的變化()頁面上,如果我選項卡,選擇,然後用箭頭來選擇一個選項,改變事件不應該發生,直到選擇失去焦點(至少這是我如何閱讀它)。事實上,我看到每次按箭頭鍵都會發生變化事件。

http://api.jquery.com/change/

對於選擇框,複選框和單選按鈕,該事件被立即當用戶用鼠標的選擇,直到元素失去燒製,但是對於其他元素類型的事件被推遲焦點。

先後這種行爲改變了,還是我不理解的功能?

更新:我被誤讀jQuery的文檔,雖然他們可能會更清晰。我已經接受了讓我意識到的答案。對於我的問題的實際解決方案,我將一個keydown事件綁定到select,如果使用箭頭,則將data屬性設置爲false。然後在更改綁定中,我設置了一個條件,只在data屬性爲true時纔對更改執行代碼。這是不是最好的解決方案,它有效地殺死變化回調的代碼,如果用一個箭頭,但由於有觸發功能(通過按鈕)的另一種方法,我可以用這個功能生活。

UPDATE2: 這裏是工作提琴:http://jsfiddle.net/McWatt/BR8QQ/

// prevent change event being fired on arrow keys 
$('#more').data('activation', 'activated').bind({ 
    keydown: function(event) { 
     if(event.which === 38 || event.which === 40){ 
      $(this).data('activation', 'paused'); 
     } 
    }, 
    click: function(event) { 
     if($(this).data('activation') === 'paused'){ 
      $(this).data('activation', 'activated'); 
      $(this).trigger('change'); 
     } 
    }, 
    change: function(event) {  
     if($(this).data('activation') === 'activated'){ 
      var time = new Date(); 
      $('#changed').text(event.type + ": " + time.getTime()); 
     } 
    } 
}); 

+0

你應該讓你更新2回答和接受它。我有類似的問題,你的解決方案也適用於我。對於有類似問題的其他用戶可能會很有用,並應標記爲正確答案。 – Cthulhu

回答

3

看起來它是不準確的。據我所知,這與香草change事件沒什麼兩樣。

基本上,只要基於文本的輸入在其值更改後失去焦點,它就會觸發事件。無論何時單擊複選框(或在聚焦時用空格鍵切換),它都會觸發事件。無論何時選擇一個單選按鈕(通過單擊,空格鍵,箭頭鍵......),它都會觸發事件。每當選擇框改變時(通過選擇,箭頭鍵......)它也會觸發事件。

jQuery和香草JS在這方面沒有什麼不同。

+0

雖然一個小的區別是,jQuery修補了「更改」事件,使舊IE中的DOM泡起來。我想這隻適用於通過'.trigger('change')'/'派發的合成jQuery事件。改變()'並且與這個問題無關。 –

1

也許你可以在裏面加一點,即可查看過

$('#more').change(function(event){ 
    $(this).click(function(event){ 
    var time = new Date(); 
    $('#changed').text(event.type + ": " + time.getTime()); 
    }); 
});​ 

http://jsfiddle.net/x5cTr/13/

+0

此解決方案_almost_解決了我的問題,但在邊緣情況下發生了一些奇怪的行爲。我很確定這與我在特定代碼中實現它有關,所以也許在其他情況下它可以正常工作。感謝發佈! – ErikPhipps

相關問題