文档可见性变化与窗口模糊/焦点，有什么区别，何时使用哪个？

Question

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

Answer 1

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

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

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

这是visibilitychange 和blur/focus 之间的主要区别变得明显并且也很重要的地方。根据“ 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 在模糊/聚焦之前触发，有时在之后触发。它甚至可能在模糊事件和焦点事件之间触发。