Chrome中window focus与blur事件无法正常触发的解决办法

Chrome的标签页预加载机制和焦点管理逻辑，会导致直接绑定的focus/blur事件在新标签页场景下触发不稳定，以下是几个可行的解决思路：

1. 改用visibilitychange事件替代 #

Chrome对文档可见性的检测更可靠，visibilitychange事件能精准捕捉标签页从可见到隐藏（或反之）的状态变化，可间接实现焦点状态的判断：

<!DOCTYPE html>
<html>
<head>
    <title>Window Focus/Blur Logger</title>
    <script>
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                console.log('Window lost focus');
            } else {
                console.log('Window gained focus');
            }
        });
    </script>
</head>
<body>
</body>
</html>

2. 延迟绑定focus/blur事件 #

避免在页面未完全初始化时绑定事件，将事件绑定逻辑放到load或DOMContentLoaded事件中，确保页面加载完成后再注册监听：

<!DOCTYPE html>
<html>
<head>
    <title>Window Focus/Blur Logger</title>
    <script>
        window.addEventListener('load', function() {
            window.addEventListener('focus', function() {
                console.log('Window gained focus');
            });

            window.addEventListener('blur', function() {
                console.log('Window lost focus');
            });
        });
    </script>
</head>
<body>
</body>
</html>

3. 关闭Chrome标签预加载功能（用户端操作） #

如果不需要依赖预加载加速，可让用户关闭Chrome的预加载设置：

• 打开Chrome设置 → 隐私和安全 → Cookie和其他网站数据
• 找到"预加载页面以加快浏览速度和搜索结果"选项，关闭它

这个设置会影响Chrome的预加载行为，减少预加载标签页的事件异常问题。

内容的提问来源于stack exchange，提问作者Niranjan