Изменение видимости документа по сравнению с размытием / фокусировкой окна, в чем разница, когда использовать?

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

Результат: это непредсказуемо. Иногда изменение видимости срабатывает до размытия / фокуса, а иногда после. Он может даже срабатывать между событием размытия и событием фокусировки.

Answer 2

По данным MDN window.onBlur имеет лучшую совместимость с браузером.

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

(Safari - частичная поддержка)

Я предполагаю, что проще использовать window обработчик событий на document