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

Question

在ECMAscript（= Javascript）中，有两种方法可以检查用户是否离开您的页面。您可以在文档上监听“ visibilitychange”事件，也可以在窗口上监听“ blur”和“ focus”事件。它们之间有区别吗？

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");
      }

结果：这是不可预测的。有时能见度变化会在模糊/聚焦之前触发，有时会在其后触发。它甚至可能在模糊事件和焦点事件之间触发。