javascript - window.onfocus 在 IE7 中不触发，在 Opera 中不一致

Question

请注意，这与窗口上的焦点和模糊事件有关，而不是表单字段上的事件。

我在弹出窗口中加载文档，它包含以下代码:

<script type="text/javascript">
window.onblur = function(){ document.title="BLURRED"; }
window.onfocus= function(){ document.title="FOCUSED"; }
</script>

这些功能是临时的，用于测试。我希望使用这些事件来设置一个指示窗口状态的标志；我正在做一个聊天应用程序，如果消息在它最小化时出现，我会做一些引人注目的标题更改。但是，如果他们在窗口获得焦点时不取消，他们就会很烦人。

加载时，我还将焦点放在文本区域中。 (不确定这是否有任何区别。)

IE7(我手头没有其他版本)似乎可以识别 window.onblur 但不能识别 window.onfocus。 Opera 10 真是太奇怪了。

这是我使用的浏览器中发生的情况。我通过单击父级中的链接启动弹出窗口，然后通过单击 (Windows XP) 任务栏上的弹出窗口按钮经历几个最小化-恢复周期:

Safari 4:

• 打开窗口:文档以原始标题打开
• 最小化:标题变为“BLURRED”
• 恢复:标题更改为“FOCUSED”

这是我期望发生的事情。

火狐 3.5:

• 打开窗口:文档以原始标题打开，然后更改为“FOCUSED”
• 最小化:标题变为“BLURRED”
• 恢复:标题更改为“FOCUSED”

onfocus onload有点意外，但不是问题。

IE7:

• 打开窗口:文档以原始标题打开
• 最小化:标题变为“BLURRED”
• 恢复:无论切换多少次，标题都不会改变

onfocus 发生了什么？

歌剧 10.5

• 打开窗口:文档以原始标题打开，但在另一个选项卡中，而不是弹出窗口

有时...

• 最小化:标题变为“BLURRED”
• 恢复:标题更改为“FOCUSED”

有时...

• 最小化:标题变为“BLURRED”然后“FOCUSED”
• 恢复:标题不变

好吧，这很奇怪......

我对其他方法持开放态度，但我真的很想了解这里发生了什么，用普通的旧 Javascript - 所以请不要给出 jQuery 答案，除非真的没有另一种方法。

Answer 1

onfocus 和 onblur 在 IE 中的窗口对象上存在错误。另一种方法是使用传播 onfocusin 和 onfocusout 事件:

function focusin() { document.title="BLURRED"; }
function focusout() { document.title="FOCUSED"; }

if ("onfocusin" in document)
    document.onfocusin = focusin,
    document.onfocusout = focusout;
else
    window.onblur = focousout,
    window.onfocus= focusin;

我已经为你设置了一个例子here .

focusin 和 focusout 与 focus 和 blur 不同，它们是传播事件；他们将触发页面中的元素并向上冒泡。如果您不想对页面上的所有元素执行此事件，则需要检查 event.srcElement 或 event.target。

对于 Opera，“奇怪”是您可以使用的一个词。我机器上的版本不会为我触发窗口上的模糊或焦点事件。希望其他人可以为您提供解决方案。