Webサイトを開発しているとき、デバッグのために Chrome デベロッパーツールなどブラウザの開発者ツールを使うと便利です。
例えば、ある要素がクリックに反応しないとき、開発者ツールで JavaScript からクリックイベントを送ってみたりなどといったことです。
ほとんどのイベントは開発者ツールで普通にイベントを送ってあげるだけで問題ないのですが focus
イベントだけは特別です。
そこでこの記事では、開発者ツールから特定の要素に focus
イベントを送る際の注意点を説明します。
開発者ツール、ここでは Chrome デベロッパーツールとして話を進めていきますが、Chrome デベロッパーツールには monitorEvents()
というイベントを監視するためのメソッドが用意されています。
例えば、開発者ツールのコンソールに次のように入力します。
monitorEvents(window, 'click')
その後、ページ内の任意の場所でクリックすると、クリックイベントが表示されます。
![Image in a image block](/_astro/a42a150b-2946-44ce-9eb6-940dce1f13a2.2EdW4Daq_1N5kbB.webp)
第1引数には監視対象の要素を、第2引数には監視対象のイベントを指定します。第2引数は省略することができ、省略した場合はすべてのイベントを監視します。
適当な要素をJSで取得しクリックイベントを送ってみると、手動でクリックした場合と同じようにクリックイベントが表示されます。
![Image in a image block](/_astro/a89fa540-8a7b-416a-8aeb-b0fd6ed5d33f.Zv_-2ibn_niMhC.webp)
$0
は検証中の要素を示します。便利なのでぜひ使ってみてください。
さて、 monitorEvents()
を使えばイベントを監視できることがわかりました。それではこれを使って focus
イベントを監視してみましょう。
開発者ツールを開いて次のように入力して focus
イベントの監視を開始します。
monitorEvents(window, 'focus')
ページ内の適当な場所をクリックしてイベントが監視できていることを確認しましょう。
![Image in a image block](/_astro/6d84a7d6-a29d-4750-920a-a2462326a917.gJ_E78RH_ZVcwln.webp)
次に、JSを使って focus
イベントを送ってみます。適当な要素を検証し、コンソールに下記のように入力します。
$0.focus()
![Image in a image block](/_astro/65626d5f-f71f-4f34-8db7-cdda4488368a.Bm6xukep_Z69mdr.webp)
何も起きません。一体どういうことなのでしょうか?
嘘みたいな話ですが理由は簡単で、開発者ツールがアクティブになっている間はフォーカスが開発者ツールにあるからです。
そのため、開発者ツールで focus
イベントをある要素に送りたいときは setTimeout()
を使って時間差で focus
イベントを発火させ、その間に開発者ツールからページをアクティブにしておきます。
つまり、下記のような手順です。
-
setTimeout()
でイベントを発火するタイマーを設定 - ページを適当にクリックして開発者ツールを非アクティブにする
実際にやってみたのがこちらになります。
![Image in a image block](/_astro/8c8cfd31-dffd-43f9-be20-accd642f11a5.Da_6_AiN_Z15jeba.webp)
知らないとちょっとハマってしまいそうな罠ですね。
以上です。この記事では、開発者ツールから特定の要素に focus
イベントを送る際の注意点を説明しました。
コメントを送る
コメントはブログオーナーのみ閲覧できます