Satoha's Blog
TechMedicalLife
Profilegithub-icon

今更クリックの動作について

作成:2025.02.23

更新:2025.02.23

active、hover 、focus 、focus-visibleを使い分けるためにクリックしたときの動作について確認する。
参考サイトをNotebookLMにいれて整理しながら記事を作っています。

クリック時のイベントの流れ

ウェブ開発では、ユーザーのクリックに関するイベントを適切に処理することが重要です。
本記事では、クリック時のイベントの流れや関連するマウスイベントについて詳しく解説します。

基本的なマウスイベント

クリック時には、以下の3つのイベントが順番に発生する。

  1. mousedown: ポインティングデバイスのボタンが要素上で押されたときに発生。
  2. mouseup: ポインティングデバイスのボタンが要素上で離されたときに発生。
  3. click: mousedown と mouseup が同じ要素で発生した場合に発生。

イベントの順序

マウスイベントは特定の順序で発生します。

  • カーソルの移動時mousemove → mouseover → mouseenter
    • mouseenter:要素にカーソルが入ったときに発生。
    • mouseover:要素または子要素にカーソルが入ったときに発生。
    • mousemove:カーソルが移動するたびに発生。
  • ボタンが押されて離された場合mousedown → mousemove(オプション)→ mouseup → click
  • ダブルクリックの場合mousedown → mousemove(オプション)→ mouseup → click→mousedown → mousemove(オプション)→ mouseup → click → dblclick

click イベントの詳細

click イベントは mousedown と mouseup が同じ要素で発生した場合にのみ生成。
ただし、mousedown と mouseup のターゲットが異なる場合、click イベントは最も近い共通の祖先要素で発生します。

auxclick イベント

auxclick は、プライマリでないポインティングデバイスボタン(通常はマウスの中ボタン)が押された場合に発生します。
auxclick イベントは mousedown および mouseup イベントの後に発生することがあります。

その他のマウスイベント

mouseover: ポインティングデバイスが要素の境界上に移動したときに発生。
mouseout: ポインティングデバイスが要素の境界から離れたときに発生。
mouseenter: ポインティングデバイスが要素の境界上に移動したときに発生(バブリングしない)。
mouseleave: ポインティングデバイスが要素の境界から離れたときに発生(バブリングしない)。
mousemove: ポインティングデバイスが要素上を移動しているときに発生。

CSSの要素

:active疑似クラス
mousedown 時のスタイルを変更可能
mouseup 時に :active のスタイルが解除される
:hover 疑似クラス:
mouseenter / mouseover 時のスタイルを変更可能
mouseleave / mouseout 時に:hover のスタイルが解除

:focus 疑似クラス

:focus 疑似クラスは、要素がフォーカスを受けたときに適用されるスタイルを定義するためのもの。
ユーザーがクリック可能な領域をクリックすると、ユーザーエージェントはフォーカスをその要素に移動させる手順を実行します。

:focus-visible 疑似クラス

:focusと違ってマウス操作 (クリック)で適用されない。
Tabキーなどのキーボード操作では適用される。

まとめ

active、hover 、focus 、focus-visibleを使い分ける
フォーム要素(<input> など)には :focus を使う
ボタン・リンクのフォーカス強調は :focus-visible を使うのが望ましい
キーボード操作でのアクセシビリティを考えるなら :focus-visible

参考

https://www.w3.org/TR/uievents/#event-type-click
https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
https://html.spec.whatwg.org/multipage/interaction.html#focus
https://www.w3.org/TR/selectors-4/#focus-visible-pseudo