3

我在很多地方都看到 jQuery 在选择上的更改事件只会在模糊或鼠标单击时触发，但是当我尝试它时，该事件也会在每次按下箭头键时触发。当使用箭头选择选项时，我试图让 change 事件不触发。例如：

<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 事件绑定到将数据属性设置为 false 的选择。然后在更改绑定中，我设置了一个条件，如果数据属性为真，则仅在更改时执行代码。这不是最好的解决方案，因为如果使用箭头，它会有效地终止更改回调代码，但由于有另一种触发功能的方法（通过按钮），我可以接受这个功能。

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());
        }
    }
});

​</p>

4

2 回答 2

3

好像不太准确 据我所知，这与原版change事件没有什么不同。

基本上，每当基于文本的输入在其值更改后失去焦点时，它都会触发该事件。每当单击复选框（或在聚焦时使用空格键切换）时，它都会触发事件。Whenever a radio button is selected (by clicking, spacebar, arrows keys...) it fires the event. 每当更改选择框（通过选择，箭头键...）时，它也会触发事件。

jQuery 在这方面与原版 JS 没有什么不同。

于 2012-12-18T21:25:06.670 回答
1

也许您也可以在那里添加点击检查

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

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

于 2012-12-18T21:31:52.010 回答