ブラウザのタブを変更すると、特に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が2度発砲しています！すべてのブラウザは、タブに戻ったときにフォーカスイベントを発生させるようです。

ブラウザのタブを切り替えるときに機能が実行されるのは、ユーザーのクリックやタブの場合にのみ実行するのが理想的ですが、Chromeの問題を認識しています。私の実際のアプリで余計な不要なバックツーバックAJAXリクエスト（これは最新である必要があるオートコンプリートの結果を取得するためのものですが、キーアップイベントを使用したいとは思っていません）。

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