Кросс-браузер: обнаружение размытия на окне

Question

Я только что прочитал, я думаю, что все темы, связанные с этой темой, и я не могу найти реальное решение моей проблемы. Мне нужно определить, когда окно браузера теряет фокус, то есть событие размытия. Я перепробовал все сценарии на stackru, но, похоже, нет подходящего кросс-браузерного подхода.

Firefox - проблемный браузер здесь.

Общий подход с использованием jQuery:

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

Это работает в Chrome, IE и Opera, но Firefox не обнаруживает событие.

Существует ли правильный кросс-браузерный способ обнаружения события размытия окна? Или, по-другому, есть ли способ обнаружить событие размытия окна с помощью браузера Firefox?

---

Связанные вопросы и исследования:

• Посмотрите на фокус Firefox 3 и размытие окна
• Согласно следующим статьям о github, jQuery прекратил поддержку тестирования размытия в Firefox:
  • https://github.com/jquery/jquery/pull/1423
  • http://bugs.jquery.com/ticket/13363

Answer 1

Я попробовал оба:

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

а также

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

и они оба работали в моей версии FF (33.1).

Вот jsfiddle: http://jsfiddle.net/hzdd06eh/

Щелкните внутри окна "Выполнить", а затем щелкните за пределами него, чтобы вызвать эффект.

Answer 2

document.hasFocus ( MDN) - это реализация, которая может решить проблему с Firefox, но в Opera она не поддерживается. Таким образом, комбинированный подход может решить проблему, с которой вы сталкиваетесь.

Функция ниже иллюстрирует, как вы можете использовать этот метод:

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

Поскольку ваш вопрос недостаточно ясен в отношении приложения (временное, паб / подсистема, управляемая событиями и т. Д.), Вы можете использовать вышеописанную функцию несколькими способами.

Например, проверка по времени может быть аналогична проверке, выполненной на этой скрипке ( JSFiddle).

Answer 3

Похоже, что jQuery больше не поддерживает эти тесты для FireFox:

• Список ошибок jQuery находится здесь: http://bugs.jquery.com/ticket/13363
• jQuery close / deprecation commit здесь: https://github.com/jquery/jquery/pull/1423

Я ищу лучший способ поддержки событий размытия в Firefox, но пока я не найду лучший подход, это более актуальный статус по сравнению с первоначально принятым ответом.

Answer 4

Вы можете использовать метод размытия jQuery для окна, например так:

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

Это работает в Firefox, IE, Chrome и Opera.

Answer 5

Я пытался использовать функцию DOM addEventListener

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

Я получил его на работу после первого размытия. но это не работало, когда у меня не было прикрепленной к нему функции щелчка. Там может быть какое-то обновление, которое происходит, когда функция щелчка интерпретируется

Answer 6

Вот альтернативное решение для вашего вопроса, но оно использует API видимости страницы, а решение совместимо с браузерами.

(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"
        });
})();