窗口焦点和模糊事件在 Android 浏览器上无法正常工作答案

【问题标题】：Window focus and blur events not working correctly on Android browser窗口焦点和模糊事件在 Android 浏览器上无法正常工作
【发布时间】：2012-03-09 00:08:37
【问题描述】：

我发现当附加到窗口、文档或正文时，Javascript 焦点和模糊事件在 Android 浏览器上无法正确触发。

我编写了一个简单的测试脚本，它在桌面浏览器上可以正常运行，但在 Android 浏览器、Dolphin 和 Opera 移动版上却失败了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Focus test</title>

    <script type="text/javascript">

        window.onfocus = function() {
            document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
        };
        window.onblur = function() {
            document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
        };

    </script>
</head>

<body>
    <input id="test" name="test" />
    <div id="console"></div>
</body>

</html>

有趣的是，如果表单输入获得焦点，事件处理程序会触发，而在模糊时，模糊事件处理程序会触发两次。

有没有人对此有好的解决方案或解决方法？

编辑： 预期的结果是，如果我更改浏览器选项卡或更改为另一个应用程序，模糊事件应该触发，如果我返回浏览器选项卡，焦点事件应该触发（这就是它在桌面上的工作方式）

【问题讨论】：

你试过 jQuery 吗？它对事件进行了很多规范化，因此它们在不同的浏览器中更加一致。
是的，我从 jQuery 开始，我只是将示例简化为纯 javascript，以排除最终的 jQuery 错误。
您的示例在 Android 浏览器上的预期结果是什么？
也许Page visibility API 会有所帮助？我似乎无法想出一致的方法来使 onblur 工作。
哎呀。刚刚意识到这是一个旧线程。

标签： javascript android dom-events onblur onfocus

【解决方案1】：

我刚刚在运行 jellybean 的 Galaxy Nexus 上测试了您的代码（我拥有的全部），这段代码运行良好，并且两个事件都只触发一次。

document.getElementById('test').onfocus = function() {
    document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
};
document.getElementById('test').onblur = function() {
    document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
};

可能是您的目标是窗口，在大多数移动设备上，窗口本身通常不能“模糊”。确保您直接要求元素报告其自己的模糊和焦点事件。

编辑： 此外，请确保在应用事件侦听器之前等待 DOM 准备就绪。

【讨论】：

我知道它适用于文档元素，但我特别想在窗口元素上使用。预期的结果是，如果我更改浏览器选项卡或更改为另一个应用程序，模糊事件应该触发，如果我返回浏览器选项卡，焦点事件应该触发（这就是它在桌面上的工作方式）