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

Window focus and blur events not working correctly on Android browser

本文关键字：常工作 工作 模糊 聚焦 事件 浏览器 Android 窗口      更新时间：2023-09-26

我发现Javascript焦点和模糊事件在安卓浏览器上连接到窗口、文档或正文时无法正确启动。

我写了一个简单的测试脚本，它在桌面浏览器上正常工作，但在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>

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

有人对此有好的解决方案或变通方法吗？

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

我相信轮询文档的焦点状态可能正是您想要的。每500毫秒轮询一次并不昂贵，而且可以满足您的需要。如果你想要文档焦点变化的几乎即时警报，你可以尝试100ms之类的方法。

let prevStateIsFocused = null // used to ensure that there is only one execution of a function for either the document focused or not
setInterval(() => {
    if(document.hasFocus()){
        if(prevStateIsFocused !== true){
            console.log('window is focused')
            // execute some function here ...
        }
        prevStateIsFocused = true
    }else{
        if(prevStateIsFocused !== false){
            console.log('window has lost focused, blurred')
            // execute some function here ...
        }
        prevStateIsFocused = false
    }
}, 500)

演示：https://jsfiddle.net/sanjaydookhoo/1h7gncaf/

我刚刚在运行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准备就绪。

相关文章：