当我聚焦选项卡/窗口时，为什么模糊会在两个焦点事件之间触发？ [铬]

Question

我正在构建一个 chrome 扩展程序，并且希望在用户返回到我的扩展程序选项卡时执行 foo() 操作。我当前的问题是，当我单击扩展程序的选项卡时：

• 首先触发焦点事件
• 然后触发模糊事件（为什么？）
• 然后另一个焦点事件触发（也是为什么）

  var focusWasAway = false;
  var counter = 0;
  window.addEventListener('focus', () => {
    if (focusWasAway) {
      focusWasAway = false;
      console.log("hello", counter);
      counter = counter + 1;
      foo()
    };
  });
  window.addEventListener('blur', () => {
    console.log("blurring");
    focusWasAway = true;
  });

我想了解是什么导致选项卡失去焦点，然后在单击时再次获得焦点。

Answer 1

如果有人需要解决方案，请收听文档上的visibilitychange，请参阅此处

  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      console.log("I only fire once");
      foo()
    }
  });

但是我仍然想了解在给定示例中是什么触发了模糊和聚焦。