Подтвердить что ты не робот

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

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

Firefox - это проблемный браузер.

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

а также

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

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

Здесь jsfiddle: http://jsfiddle.net/hzdd06eh/

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

Вот альтернативное решение вашего вопроса, но оно использует API видимости страницы, а решение 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"
        });
})();