オーバーレイの下にある要素でのキーイベントを無効化したい
オーバーレイ(画面を薄暗くする、擬似的なモーダルダイアログを作るときなどに使うやつ)を表示しているとき、オーバーレイよりも下にある要素へのマウス操作は無効化できますが、キーボード操作が無効化できません。
例えばTabキーでフォーカス移動して、Enterでボタンを押せたり。
あらかじめ画面上の操作可能な要素を洗い出して1つずつdisableしたり、keydownイベントハンドラの冒頭に条件分岐を書いたり、といった泥臭いやり方なら浮かびますが、もっとシンプルに実装できないものでしょうか。
オーバーレイ表示中は、操作可能な要素の方が少ないので、セレクタ指定などで「これら以外はキー入力を無視する」といった実装方法が取れるとだいぶ楽だと思っています。
例えばactive-on-overlay
というクラスのついた要素の子孫だけが操作可能だとして、
if ($(this).closest(".active-on-overlay").length !== 0) { ... }
とか・・・
jQueryのon
をdocument
に対して設定して全要素のイベントをうまく処理したりとか、何とかならないかと漠然とした考えもありますが、なかなか思いつきません。
すでに設定済みのイベントハンドラがあれば、それも止める必要もありますし・・・
ガチガチに完全に防ぐつもりは無く、誤操作の範囲を防止できればひとまず十分と考えていますが、何か良い方法は無いでしょうか。