Question

我对我刚刚意识到的焦点事件有点疑问。显然，当切换到另一个浏览器选项卡然后再返回时，焦点会激活。我宁愿没有那样的事情发生;有可能吗？

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

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

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

理想情况下，在切换浏览器标签时，除了用户点击或标签之外，该功能不应该运行，但现在我知道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

更改浏览器标签会不利地触发焦点事件，尤其是在Google Chrome中

2 个答案: