javascript - 更改浏览器选项卡会意外触发焦点事件，尤其是在 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;  
    });​