我刚读过,我认为处理这个问题的所有线程,我都无法找到解决问题的真正方法。我需要检测浏览器窗口何时失去焦点,即模糊事件。我已经尝试了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浏览器检测窗口模糊事件?
相关问题和研究:
我试过两个:
document.addEventListener('blur', function(){console.log('blur')});
和
window.addEventListener('blur', function(){console.log('blur')});
他们都在我的FF版本(33.1)中工作。
这是jsfiddle:http://jsfiddle.net/hzdd06eh/
在“运行”窗口内单击,然后在其外部单击以触发效果。
似乎jQuery不再支持FireFox的这些测试:
我正在寻找一种更好的方法来支持Firefox模糊事件,但在找到更好的方法之前,这是一个相对于原始接受的答案更新的状态。
你可以在窗口上使用jQuery的blur方法,如下所示:
$(document).ready(function() {
$(window).blur(function() {
// Put your blur logic here
alert("blur!");
});
});
这适用于Firefox,IE,Chrome和Opera。
我尝试使用addEventListener DOM函数
window.addEventListener('blur', function(){console.log('blur')});
window.addEventListener('click', function(event){console.log(event.clientX)});
我在第一次模糊后开始工作了。但是当我没有附加点击功能时它没有用。解释单击函数时可能会发生某种刷新
这是您的问题的替代解决方案,但它使用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"
});
})();