Al cambiar las pestañas del navegador se desata indeciblemente el evento de enfoque, especialmente en Google Chrome

Question

Tengo un pequeño problema con el evento de enfoque que acabo de conocer. Aparentemente, el foco se dispara al cambiar a otra pestaña del navegador y luego nuevamente. Prefiero que eso no suceda; ¿Es posible?

Nunca me había dado cuenta de esto hasta hoy. He aquí una pequeña demostración: http://jsfiddle.net/MJ6qb/1/

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

para reproducir: Enfoque en la entrada, a continuación, cambiar las pestañas del navegador, a continuación, cambiar de nuevo. Todos los navegadores parecen disparar el evento de enfoque cuando vuelves a la pestaña, y Google Chrome 19 lo está disparando dos veces!

Idealmente, la función no debe funcionar al cambiar las pestañas del navegador en absoluto, pero sólo el usuario hace clic o Tab, pero ahora que soy consciente del problema Chrome que estoy un poco más preocupado por eso porque es resultante en solicitudes AJAX consecutivas no deseadas en mi aplicación real (es para buscar resultados para un autocompletado que debe estar actualizado, pero no tanto como para utilizar el evento de teclado).

No parece jQuery relacionado (lo probé con vainilla javascript) pero puedo usar jQuery para una solución. ¿Hay algo que pueda hacer al respecto? Sé que puedo usar jQuery's one(), pero quiero que la función se ejecute más de una vez.

Answer 1

Trate 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

Pruebe lo siguiente para evitar el problema:

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