窗口焦点和模糊事件在 Android 浏览器上无法正常工作
Posted
技术标签:
【中文标题】窗口焦点和模糊事件在 Android 浏览器上无法正常工作【英文标题】：Window focus and blur events not working correctly on Android browser 【发布时间】：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 工作。 哎呀。刚刚意识到这是一个旧线程。 【参考方案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 准备就绪。
【讨论】：
我知道它适用于文档元素，但我特别想在窗口元素上使用。预期的结果是，如果我更改浏览器选项卡或更改为另一个应用程序，模糊事件应该触发，如果我返回浏览器选项卡，焦点事件应该触发（这就是它在桌面上的工作方式）以上是关于窗口焦点和模糊事件在 Android 浏览器上无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
在 iframe 主体上设置焦点和模糊事件不适用于 Firefox