Window 焦点和模糊事件在 Android 浏览器上无法正常工作

Question

我发现当附加到 window、文档或正文时，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>

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

有没有人有一个好的解决方案或解决方法？

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

Answer 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 准备好。

Answer 2

我相信轮询文档的焦点状态可能正是您想要的。 每 500 毫秒轮询一次并不昂贵，并且会给你你需要的东西。 如果您想要文档焦点更改几乎立即发出警报，您可以尝试 100 毫秒之类的时间。

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/

Window 焦点和模糊事件在 Android 浏览器上无法正常工作

问题描述

2 个解决方案

解决方案1
0 2012-10-04 20:58:24

解决方案2
0 2022-08-29 23:57:44

Window 焦点和模糊事件在 Android 浏览器上无法正常工作

问题描述

2 个解决方案

解决方案1 0 2012-10-04 20:58:24

解决方案2 0 2022-08-29 23:57:44

解决方案1
0 2012-10-04 20:58:24

解决方案2
0 2022-08-29 23:57:44