🦝

一時的にユーザー操作を不可にする : JavaScript

に公開

完全なるメモです。
CSSのpointer-events:noneでマウスインタラクションのイベントを無効にすることはできますが、効果は限定的です。JSを利用すると以下の要件を担保できるようです。

  • マウス・タッチ操作の無効化
  • キーボード操作の無効化
  • タブフォーカスの無効化
  • 読み上げの無効化
// lock
document.querySelector("body").inert = true;

// unlock
document.querySelector("body").inert = false;

ロック中の表示処理はCSSだけでできそう

body[inert]{
  filter: blur(5px);
}

Discussion