google-chrome - jQuery 更改事件在更改回调中将焦点转移到另一个控件时触发了两次

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

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

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

我猜这是因为事件回调中的焦点切换而发生的。有没有办法解决？

Answer 1

更改事件处理程序中其他控件上的 focus() 调用 chrome 中的更改事件，因为如果值不同，它会取消焦点“模糊”当前控件。

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