更改浏览器标签会不利地触发焦点事件,尤其是在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

试试这个

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