navigation - 文档可见性更改与窗口模糊/焦点，有什么区别，何时使用？

Question

在 ECMAscript (=Javascript) 中，有两种方法可以检查用户是否离开您的页面。您可以在 上侦听“ visibilitychange”事件，document也可以在 上侦听“ blur”和“ focus”事件window。它们之间有区别吗？

Answer 1

是的。它们之间最显着的区别可以在手机上看到。在台式机和平板设备上，当您想要更改浏览器选项卡时，只需一步即可。你只需点击/点击你想去的地方，你就在那里。看起来像这样，

但是在电话上通常有两个步骤。你一开始是这样的，

当你点击 TABS 图标时，你会看到一个像这样的飞越菜单，

这是可见性变化和模糊/焦点之间的主要区别变得明显并且也很重要的地方。根据“ visibilitychange”用户在这个阶段还没有离开你的页面。但是根据“ blur/ focus”用户离开了。

至于其他情况，我用两者来看看之前哪个火了。代码是，

document.addEventListener("visibilitychange", visChngF);
function visChngF()
      {
        if (document.hidden) { 
            console.log("hidden means user is gone");
        } else {
            console.log("visible means user is back");
        }
      }

window.addEventListener('blur', blurHappenedF);
      function blurHappenedF()
      {
      console.log("blur means user is away");
      }

window.addEventListener('focus', focusHappenedF);
function focusHappenedF()
      {
      console.log("focus means user is here");
      }

结果：不可预测。有时 visibilitychange 在模糊/聚焦之前触发，有时在之后触发。它甚至可能在模糊事件和焦点事件之间触发。

Answer 2

根据 MDNwindow.onBlur具有更好的浏览器兼容性。

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur

（Safari - 部分支持）

我假设使用window事件处理程序更容易document