跨浏览器：检测窗口上的模糊事件(Cross-browser: detect blur event o

我刚才看了，我觉得所有的这个主题涉及的线程，我无法找到一个真正解决我的问题。我需要在浏览器窗口失去其重点检测，即模糊事件。我试过计算器上的所有脚本，但似乎不是一个正确的跨浏览器的方法。

Firefox是这里有问题的浏览器。

使用jQuery的常用方法是：

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

这个工程在Chrome，IE和Opera，但Firefox不检测事件。

是否有一个适当的跨浏览器的方法来检测窗口模糊事件？或者，问不同，有没有一种方法来检测与Firefox浏览器的窗口blur事件？

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的错误票是在这里： 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的模糊方法，像这样：

$(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:

这是一种替代解决您的问题，但它使用的网页浏览权限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"
        });
})();

文章来源: Cross-browser: detect blur event on window