16

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

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

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

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

4

1 回答 1

0

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

于 2012-10-04T20:58:24.407 回答