15

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

直到今天我才意识到这一点。这是一个小演示：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()，但我确实希望该函数运行不止一次。

4

2 回答 2

8

试试这个

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;  
    });​
于 2012-05-18T17:57:48.077 回答
3

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

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

​</p>

小提琴 ​</p>

于 2012-05-18T17:50:30.803 回答