Question

一个奇怪的虫子最近给我带来了很多麻烦，我已经能够把它变成最简单的形式了。看到这个小提琴：http://jsfiddle.net/PgAAb/

<input type="text" id="foo" placeholder="Change me!"><br>
<input type="text" id="bar" size="30" placeholder="Dummy control to switch focus">

$('#foo').change(function() {
    console.log('Changed!');
    $('#bar').focus();
});

基本上，当您更改第一个文本框并使用鼠标单击文档中的其他位置时，更改事件将像往常一样触发。但是，如果更改该值并按Enter键以触发更改，则事件将触发两次。

我注意到该错误仅适用于Chrome。 Firefox不会触发事件两次，IE甚至不支持使用enter键来触发输入更改。

我想这是因为事件回调中的焦点切换。有没有办法解决这个问题？

Answer 1

更改事件处理程序中其他控件上的focus（）调用chrome中的change事件，因为如果值不同，它会使当前控件“模糊”失焦。

这个bug不是新的，你可以看看这个关于jQuery的bug票：http://bugs.jquery.com/ticket/9335

您可以通过在删除控件焦点之前禁用更改事件处理程序来解决此问题。这里有一个我想说的例子：

$('#foo').change(changeHandler);

function changeHandler() {
    console.log('Changed!');
    $(this).off('change').blur().on('change', changeHandler);
    $('#bar').focus();
}

Answer 2

此外，您可以通过在Enter键上模糊输入来解决此错误：

    jQuery('input').keydown(function(e){
    if(e.keyCode==13) jQuery(this).blur();
});

当焦点转移到更改回调中的另一个控件时，jQuery更改事件被触发两次

2 个答案: