navigation - ドキュメントの可視性の変更とウィンドウのぼかし/フォーカス、違いは何ですか?いつどちらを使用するのですか?

Question

ECMAscript (=Javascript) では、ユーザーがページから離れているかどうかを確認する方法が 2 つあります。で " visibilitychange" イベントをリッスンするか、 で " " および " " イベントをdocumentリッスンできます。それらの間に違いはありますか？blurfocuswindow

Answer 1

はい。それらの最も重要な違いは、電話で見ることができます。デスクトップおよびタブレット デバイスでブラウザのタブを変更したい場合、1 つのステップで変更できます。行きたい場所をクリック/タップするだけで、そこにいます。このように見えます。

しかし、電話では通常、2 つのステップがあります。最初はこんな感じでスタート

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

結果: 予測不能です。可視性の変化は、ぼかし/フォーカスの前に発火することもあれば、後に発火することもあります。これは、blur イベントと focus イベントの間に発生することさえあります。