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 ticket在这里：http://bugs.jquery.com/ticket/13363
jQuery close / deprecation commit在这里：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"
        });
})();

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

6 个答案: