Między przeglądarkami: wykryj zdarzenie rozmycia w oknie

Question

Po prostu czytam, myślę, że wszystkie wątki, które dotyczą tego tematu, i nie mogę znaleźć prawdziwego rozwiązania mojego problemu. Muszę wykryć, kiedy okno przeglądarki traci ostrość, tj. Zdarzenie blur. Próbowałem już wszystkich skryptów na stackoverflow, ale wydaje się, że nie ma odpowiedniego podejścia opartego na różnych przeglądarkach.

Firefox jest tutaj problematyczną przeglądarką.

Wspólne podejście przy użyciu jQuery jest:

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

To działa w Chrome, IE i Opera, Firefox, ale nie wykrywa zdarzenie.

Czy istnieje odpowiedni sposób na wykrycie zdarzenia zacierającego okno w wielu przeglądarkach? Lub, inaczej zapytany, czy istnieje sposób na wykrycie zdarzenia rozmycia okna w przeglądarce Firefox?

---

Powiązane pytania i badania:

• Zobacz Firefox 3 window focus and blur
• Według następujących artykułach GitHub, jQuery zaprzestała wsparcia dla testów rozmycie Firefox:
  • https://github.com/jquery/jquery/pull/1423
  • http://bugs.jquery.com/ticket/13363

Answer 1

Można użyć metody rozmycia jQuery na okno, tak jak poniżej:

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

Działa to w Firefox, IE, Chrome i Opera.

Answer 2

Wydaje się, że jQuery nie obsługuje tych testów Firefox:

• jQuery bilet bug jest tutaj: http://bugs.jquery.com/ticket/13363
• jQuery blisko/deprecation popełnić jest tutaj: https://github.com/jquery/jquery/pull/1423

szukam dla lepszego sposobu na obsługę zderzenia z Firefoksem, ale dopóki nie znajdę lepszego podejścia, jest to stan bardziej aktualny w porównaniu z pierwotnie przyjętą odpowiedzią.

Answer 3

The document.hasFocus (MDN) jest implementacją, która może rozwiązać problem z Firefoksem, ale w Operze nie jest obsługiwana. Tak więc połączone podejście może pomóc rozwiązać problem, z którym się borykasz.

Poniższa funkcja jest przykładem, jak można wykorzystać tę metodę:

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

Od Twoje pytanie nie jest wystarczająco jasne, o wniosku (Tymczasowy pub/podsystemu, zdarzeniami itp), można użyć funkcja powyżej na kilka sposobów.

Na przykład weryfikacja czasowa może być podobna do tej wprowadzonej w tym skrzypcach (JSFiddle).

Answer 4

Próbowałem przy użyciu funkcji addEventListener DOM

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

mam go do pracy po pierwszym rozmycia. ale nie działało, gdy nie miałem do niego dołączonej funkcji kliknięcia. Nie może być jakiś rodzaj odświeżenia, co dzieje się, gdy funkcja click jest interpretowany

Answer 5

Próbowałem zarówno:

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

i

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

i oboje pracowali w mojej wersji FF (33,1).

Oto jsfiddle: http://jsfiddle.net/hzdd06eh/

Kliknij wewnątrz okna „run”, a następnie kliknij poza to, aby wywołać efekt.

Answer 6

Oto alternatywne rozwiązanie dla twojego pytania, ale używa ono i jest kompatybilne z 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" 
     }); 
})();