Cross-browser: rileva l'evento di sfocatura sulla finestra

Question

Ho appena letto, penso a tutto il thread che si occupa di questo argomento e non riesco a trovare una soluzione reale al mio problema. Devo rilevare quando la finestra del browser perde il focus, cioè un evento di sfocatura. Ho provato tutti gli script su StackOverflow, ma non sembra che ci sia un approccio cross-browser adeguato.

Firefox è il browser problematico qui.

Un approccio comune utilizzando jQuery è:

window.onblur = function() { 
    console.log('blur'); 
} 
//Or the jQuery equivalent: 
jQuery(window).blur(function(){ 
    console.log('blur'); 
}); 

Questo funziona in Chrome, IE e Opera, ma Firefox non rileva l'evento.

Esiste un modo cross-browser adeguato per rilevare un evento di sfocatura della finestra? Oppure, chiesto in modo diverso, c'è un modo per rilevare un evento di sfocatura della finestra con il browser Firefox? Supporto

• Vedi Firefox 3 window focus and blur
• Secondo i seguenti articoli GitHub, jQuery ha interrotto per la prova sfocatura Firefox::

  ---

  questioni connesse e ricerca

  • https://github.com/jquery/jquery/pull/1423
  • http://bugs.jquery.com/ticket/13363

Answer 1

È possibile utilizzare il metodo sfocatura di jQuery sulla finestra, in questo modo:

$(document).ready(function() { 
    $(window).blur(function() { 
    // Put your blur logic here 
    alert("blur!"); 
    }); 
}); 

Questo funziona in Firefox, IE, Chrome e Opera.

Answer 2

Sembra che jQuery supporta più questi test per Firefox:

• jQuery biglietto bug è qui: http://bugs.jquery.com/ticket/13363
• jQuery vicino/deprecazione commettere è qui: https://github.com/jquery/jquery/pull/1423

sto cercando per un modo migliore per supportare gli eventi di sfocatura di Firefox, ma finché non trovo un approccio migliore, questo è uno stato più attuale rispetto alla risposta originale accettata.

Answer 3

Il document.hasFocus (MDN) è un'implementazione in grado di risolvere il problema con Firefox, ma in Opera non è supportato. Quindi, un approccio combinato può raggiungere il problema che stai affrontando.

La funzione di seguito un esempio di come è possibile utilizzare questo metodo:

function getDocumentFocus() { 
    return document.hasFocus(); 
} 

Dal momento che la tua domanda non è abbastanza chiaro circa l'applicazione (a tempo, pub/sottosistema, event driven, ecc), è possibile utilizzare la funzione sopra in diversi modi.

Ad esempio, una verifica a tempo può essere simile a quella implementata su questo violino (JSFiddle).

Answer 4

Ho provato ad utilizzare la funzione addEventListener DOM

window.addEventListener('blur', function(){console.log('blur')}); 
window.addEventListener('click', function(event){console.log(event.clientX)}); 

ho preso a lavorare dopo il primo sfocatura. ma non ha funzionato quando non ho avuto la funzione click allegata ad esso. Ci potrebbe essere una sorta di aggiornamento che si verifica quando la funzione di clic viene interpretato

Answer 5

ho provato sia:

document.addEventListener('blur', function(){console.log('blur')}); 

e

window.addEventListener('blur', function(){console.log('blur')}); 

ed entrambi lavoravano nella mia versione di FF (33,1).

Ecco il jsfiddle: http://jsfiddle.net/hzdd06eh/

clic all'interno della finestra "Esegui" e quindi fare clic su di fuori di esso per attivare l'effetto.

Answer 6

Ecco una soluzione alternativa alla tua domanda ma utilizza lo Page Visibility API e la Soluzione è compatibile con Cross Browser.

(function() { 
    var hidden = "hidden"; 

    // Standards: 
    if (hidden in document) 
     document.addEventListener("visibilitychange", onchange); 
    else if ((hidden = "mozHidden") in document) 
     document.addEventListener("mozvisibilitychange", onchange); 
    else if ((hidden = "webkitHidden") in document) 
     document.addEventListener("webkitvisibilitychange", onchange); 
    else if ((hidden = "msHidden") in document) 
     document.addEventListener("msvisibilitychange", onchange); 
    // IE 9 and lower: 
    else if ("onfocusin" in document) 
     document.onfocusin = document.onfocusout = onchange; 
    // All others: 
    else 
     window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange; 

    function onchange(evt) { 
     var v = "visible", 
      h = "hidden", 
      evtMap = { 
       focus: v, 
       focusin: v, 
       pageshow: v, 
       blur: h, 
       focusout: h, 
       pagehide: h 
      }; 

     evt = evt || window.event; 
     if (evt.type in evtMap) { 
      console.log(evtMap[evt.type]); 
     } else { 

      console.log(this[hidden] ? "hidden" : "visible"); 
     } 
    } 

    // set the initial state (but only if browser supports the Page Visibility API) 
    if (document[hidden] !== undefined) 
     onchange({ 
      type: document[hidden] ? "blur" : "focus" 
     }); 
})();