12

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

相关问题和研究：

4

6 回答 6

7

我都试过了：

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

和

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

他们都在我的FF（33.1）版本中工作。

这是 jsfiddle：http: //jsfiddle.net/hzdd06eh/

在“运行”窗口内部单击，然后在其外部单击以触发效果。

于 2015-05-20T20:05:19.380 回答
2

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

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

于 2015-05-15T00:16:51.967 回答
2

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

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

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

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

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

于 2015-05-18T02:38:48.683 回答
1

您可以在窗口上使用 jQuery 的 blur 方法，如下所示：

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

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

于 2013-02-01T13:37:45.337 回答
1

我尝试使用 addEventListener DOM 函数

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

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

于 2015-05-20T11:50:58.900 回答
1

这是您问题的替代解决方案，但它使用页面可见性 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"
        });
})();
于 2015-05-21T19:56:59.663 回答