跨浏览器：检测窗口上的模糊事件

Question

我刚刚阅读，我认为所有与该主题有关的线程，我都找不到真正解决我的问题的方法。 我需要检测浏览器窗口何时失去焦点，即模糊事件。 我已经尝试了 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 浏览器检测窗口模糊事件？

---

相关问题和研究：

• 见Firefox 3 window focus and blur
• 根据以下 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

jQuery 似乎不再支持这些针对 FireFox 的测试：

• jQuery bug 票在这里：http://bugs.jquery.com/ticket/13363
• jQuery 关闭/弃用提交在这里：https://github.com/jquery/jquery/pull/1423

我正在寻找一种更好的方法来支持 Firefox 模糊事件，但在我找到更好的方法之前，这是相对于最初接受的答案的更当前状态。

Answer 3

document.hasFocus (MDN) 是一种可以解决 Firefox 问题的实现，但在 Opera 中不受支持。因此，综合方法可以解决您面临的问题。

下面的函数举例说明了如何使用这种方法：

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

由于您的问题对应用程序（定时、发布/订阅系统、事件驱动等）不够清楚，您可以通过多种方式使用上述功能。

例如，定时验证可以像在这个小提琴 (JSFiddle) 上实现的那样。

Answer 4

你可以在窗口上使用 jQuery 的 blur 方法，像这样：

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

这适用于 Firefox、IE、Chrome 和 Opera。

Answer 5

我尝试使用 addEventListener DOM 函数

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

我在第一次模糊后让它工作。但是当我没有附加点击功能时它不起作用。 解释单击函数时可能会发生某种刷新

Answer 6

这是您问题的替代解决方案，但它使用Page Visibility 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"
        });
})();