我見過許多地方是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的變化()頁面上,如果我選項卡,選擇,然後用箭頭來選擇一個選項,改變事件不應該發生,直到選擇失去焦點(至少這是我如何閱讀它)。事實上,我看到每次按箭頭鍵都會發生變化事件。
對於選擇框,複選框和單選按鈕,該事件被立即當用戶用鼠標的選擇,直到元素失去燒製,但是對於其他元素類型的事件被推遲焦點。
先後這種行爲改變了,還是我不理解的功能?
更新:我被誤讀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());
}
}
});
你應該讓你更新2回答和接受它。我有類似的問題,你的解決方案也適用於我。對於有類似問題的其他用戶可能會很有用,並應標記爲正確答案。 – Cthulhu