当焦点转移到更改回调中的另一个控件时,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();
});

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

我注意到这个bug只适用于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();
}