遇到这种跨浏览器的事件触发差异确实挺闹心的，我帮你梳理几个可能的原因和排查方向，应该能解决Chrome里的问题：

首先，先确认事件是不是真的没触发？ #

Chrome为了优化后台标签的性能，会对后台页面的console.log输出做节流甚至延迟显示——也就是说，事件可能已经触发了，但你在控制台看不到日志而已。

你可以换个方式验证：

• 在页面上添加一个显示状态的元素，比如<div id="visibility-status"></div>，然后在事件处理里更新这个元素的内容；
• 或者改用console.error()输出，Chrome一般不会抑制错误日志的显示；
• 甚至可以用localStorage记录状态，切换回标签后再查看存储内容。

比如修改你的代码试试：

// 确保在DOM加载完成后绑定事件，避免绑定时机问题
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('visibilitychange', function () {
    const currentState = document.visibilityState;
    // 更新页面元素显示状态
    const statusEl = document.getElementById('visibility-status');
    if (statusEl) {
      statusEl.textContent = `当前状态：${currentState}`;
    }
    // 用error日志确保能看到输出
    console.error("状态变更：", currentState);
    if (currentState === 'hidden') {
      console.error("停止hub");
    } else {
      console.error("启动hub");
    }
  });
});

其他可能的排查点 #

• 检查Chrome的后台设置：打开chrome://settings/system，看看「继续运行后台应用」是否处于开启状态——如果关闭了，Chrome可能会限制后台标签的事件触发逻辑。
• 排除扩展程序干扰：用Chrome的隐身模式打开页面试试，很多扩展会修改页面的事件监听或DOM行为，隐身模式下默认禁用所有扩展，能帮你排除这个可能性。
• 确认Chrome版本：如果你用的是比较旧的Chrome版本，可能存在visibilitychange的兼容性bug，建议更新到最新稳定版再测试。
• 检查是否有其他代码阻止事件：看看页面上其他脚本有没有对visibilitychange事件调用stopPropagation()或preventDefault()，虽然其他浏览器正常，但不排除Chrome对事件冒泡的处理有细微差异。

备注：内容来源于stack exchange，提问作者Greg Veres