更改浏览器选项卡会意外触发焦点事件，尤其是在 Google Chrome 中

Question

我刚刚发现的焦点事件有点问题。显然，当切换到另一个浏览器选项卡然后再返回时，焦点会触发。我宁愿不发生这种情况；有可能吗？

直到今天我才意识到这一点。这是一个小演示：http://jsfiddle.net/MJ6qb/1/

var times = 0;
$('input').on('focus', function() {
    times ++;
    $(this).after('<br>Focused '+times+' times');   
});

重现：专注于输入，然后切换浏览器选项卡，然后切换回来。当您切换回选项卡时，所有浏览器似乎都会触发焦点事件，并且 Google Chrome 19 会触发两次！

理想情况下，切换浏览器选项卡时该功能根本不应该运行，而只能在用户单击或 Tab 时运行，但现在我知道 Chrome 问题我有点担心那是因为它在我的真实应用程序中导致额外的不需要的背靠背 AJAX 请求（它用于获取需要最新的自动完成的结果，但不是我想使用 keyup 事件）。

它似乎与 jQuery 无关（我确实使用 vanilla javascript 进行了测试），但我可以使用 jQuery 作为解决方案。对此我能做些什么吗？我知道我可以使用 jQuery 的 one()，但我确实希望该函数运行不止一次。

Answer 1

试试this

var times = 0;
var prevActiveElement;

    $( window ).on( "blur", function(e){
            prevActiveElement = document.activeElement;
    });

    $('input').on('focus', function() {
        if (document.activeElement === prevActiveElement) {
            return;
        }
        prevActiveElement = document.activeElement;
        times++;
        $(this).after('<br>Focused ' + times + ' times');
    }).on( "blur", function(){
        prevActiveElement = null;  
    });​

Answer 2

试试这个来解决这个问题：

var times = 0, foc=true;

$(window).on('focus', function() {
    foc = false;
    setTimeout(function() {foc=true}, 200);
});

$('input').on('focus', function() {
    if (foc || times===0) {
        times ++;
        $(this).after('<br>Focused '+times+' times');   
    }
});

​

FIDDLE ​