當箭頭按下時，jQuery更改事件在選擇時觸發

Question

我已經在很多地方看到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 change（）頁面，如果我選擇選項，然后使用箭頭選擇一個選項，更改事件不應該開始，直到選擇失去焦點（至少我是如何閱讀它）。 實際上，我看到每次按箭頭鍵都會觸發更改事件。

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

對於選擇框，復選框和單選按鈕，當用戶使用鼠標進行選擇時會立即觸發事件，但對於其他元素類型，事件將延遲，直到元素失去焦點。

這種行為是否已更改，或者我不了解其功能？

更新：我誤讀了jQuery文檔，盡管它們可能更清晰。 我已經接受了導致我實現的答案。 對於我的問題的實際解決方案，我將keydown事件綁定到select，如果使用了箭頭，則將數據屬性設置為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());
        }
    }
});

Answer 1

看起來不准確。 據我所知，它與香草change事件沒有什么不同。

基本上，只要基於文本的輸入在其值更改后失去焦點，它就會觸發事件。 只要單擊一個復選框（或在聚焦時使用空格鍵切換），它就會觸發事件。 每當選擇一個單選按鈕時（通過單擊，空格鍵，箭頭鍵......），它就會觸發該事件。 每當更改選擇框時（通過選擇，箭頭鍵......），它也會觸發事件。

在這方面，jQuery與vanilla JS沒有什么不同。

Answer 2

也許你可以在那里添加點擊檢查

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

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