Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Mouse events

auxclick イベントは、ポインティングデバイスの第 1 ボタン以外のボタン（マウスの第 1 の—通常は左端の—ボタン）が同じ要素（Element）内で押されて離されたとき、その要素で発行されます。

auxclick は、mousedown および mouseup イベントが発生した後に、順に発生します。

その他

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
MouseEvent
1
12
1
1
18
1
auxclick_event

auxclick イベントは、ポインティングデバイスの第 1 ボタン以外のボタン（マウスの第 1 の—通常は左端の—ボタン）が同じ要素（Element）内で押されて離されたとき、その要素で発行されます。
55
79
53
18.2
55
18.2
click_event

要素は以下のような場面で click イベントを受け取ります。
1
12
6
3
18
1
contextmenu_event

contextmenu イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。
1
12
6
3
18
dblclick_event

dblclick イベントは、ポインティングデバイスのボタン（マウスの第一ボタンなど）がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く 2 回クリックされたときに発行されます。
1
12
6
3
18
1
mousedown_event

mousedown イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたとき、その要素 (Element) に発行されます。
2
12
6
4
18
3.2
mouseenter_event

mouseenter イベントは、ポインティングデバイス（ふつうはマウス）のホットスポットが最初にイベントが発行された要素の中に移動したときにその要素 (Element) に発行されます。
30
12
10
7
30
7
mouseleave_event

mouseleave イベントは、ポインティングデバイス（ふつうはマウス）のカーソルが要素 (Element) の外に移動したときに発行されます。
30
12
10
7
30
7
mousemove_event

mousemove イベントは、カーソルのホットスポットが要素内にあるときに、ポインティングデバイス（ふつうはマウス）が移動されると、その要素に発行されます。
2
12
6
4
18
3.2
mouseout_event

mouseout イベントは、ポインティングデバイス（ふつうはマウス）を使ってカーソルを移動させ、要素やその子の中からカーソルが出たときに、その要素 (Element) に発行されます。
1
12
6
1
18
1
mouseover_event

mouseover イベントは、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに、その要素 (Element) に発行されます。
2
12
6
4
18
3.2
mouseup_event

mouseup イベントは、ポインターが要素の中にあるときに、ポインティングデバイス（マウスやトラックパッドなど）のボタンが離されるとその要素 (Element) に発行されます。
2
12
6
4
18
3.2
click

HTMLElement.click() メソッドは、要素のマウスクリックをシミュレートします。要素上で呼び出されると、その要素の Element/click_event イベントが発生します（disabled 属性が設定されている場合を除く）。
9
12
3
6
18
6
altKey

MouseEvent.altKey は読み取り専用のプロパティでありマウスイベントが発行されたときに alt キーが押されていたかどうかを論理値で示します。
1
12
1.5
1
18
1
button

MouseEvent.button は読み取り専用のプロパティで、イベントを引き起こすのにどのボタンが押されたまたは離されたのかを表します。
1
12
1
1
18
1
buttons

MouseEvent.buttons は読み取り専用のプロパティで、マウスイベントが発行されたときにマウス（またはその他の入力機器）のどのボタンが押されていたかを示します。
43
12
15
11.1
43
11.3
clientX

clientX は MouseEvent の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションのviewportにおける水平座標を定義します（ページにおける座標ではありません）。
1
12
1
1
18
1
clientY

clientY は MouseEvent の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションのviewportにおける垂直座標を定義します（ページにおける座標ではありません）。
1
12
1.5
1
18
1
ctrlKey

MouseEvent.ctrlKey は読み取り専用のプロパティで、このマウスイベントが発生した際に Ctrl キーが押されていたかどうかを示す論理値です。
1
12
1.5
1
18
1
getModifierState

MouseEvent.getModifierState() メソッドは、指定された修飾キーの現在の状態を返します。修飾キーが有効（すなわち、修飾キーが押されているかロックされている）ならば true、そうでなければ false を返します。
47
12
15
12.1
47
12.2
metaKey

MouseEvent.metaKey は読み取り専用のプロパティでありマウスイベントが発行されたときに meta キーが押されていたかどうかを論理値で示します。
1
12
1.5
1
18
1
MouseEvent

MouseEvent() コンストラクターは、新しい MouseEvent を生成します。
26
12
11
7
26
7
movementX

movementX は MouseEvent インターフェイスの読み取り専用プロパティで、直前の Element/mousemove_event イベントとこのイベントのマウスポインターの X 座標の差を示します。このプロパティの値は currentEvent.movementX = currentEvent.screenX - previousEvent.screenX のように計算されます。
37
13
41
9
17
movementY

movementY は MouseEvent インターフェイスの読み取り専用プロパティで、直前の Element/mousemove_event イベントとこのイベントのマウスポインターの Y 座標の差を示します。このプロパティの値は currentEvent.movementY = currentEvent.screenY - previousEvent.screenY のように計算されます。
37
13
41
9
17
offsetX

offsetX は MouseEvent インターフェイスの読み取り専用プロパティで、マウスポインターの X 座標におけるこのイベントと対象ノードのパディング辺との間のオフセットを提供します。
1
12
39
1
18
1
offsetY

offsetY は MouseEvent インターフェイスの読み取り専用プロパティで、マウスポインターの Y 座標におけるこのイベントと対象ノードのパディング辺との間のオフセットを提供します。
1
12
39
1
18
1
pageX

pageX は MouseEvent インターフェイスの読み取り専用プロパティで、マウスがクリックされた位置の X（水平）座標を、文書全体の左端からの相対座標で返します。 これには文書の現在見えていない範囲にあるものも含みます。
1
12
1.5
1
18
1
pageY

pageY は MouseEvent インターフェイスの読み取り専用プロパティで、マウスがクリックされた位置の Y （垂直）座標を、文書全体の相対座標で返します。 このプロパティはページの垂直スクロールを加味します。
1
12
1.5
1
18
1
relatedTarget

MouseEvent.relatedTarget は読み取り専用プロパティで、もしあれば、マウスイベントの副ターゲットを表します。
1
12
1.5
1
18
1
screenX

screenX は MouseEvent インターフェイスの読み取り専用プロパティで、グローバル（スクリーン）座標における、マウスポインターの水平方向の座標（オフセット）を示します。
1
12
1.5
1
18
1
screenY

screenY は MouseEvent インターフェイスの読み取り専用プロパティで、グローバル（スクリーン）座標における、マウスポインターの垂直方向の座標（オフセット）を示します。
1
12
1.5
1
18
1
shiftKey

MouseEvent.shiftKey は読み取り専用のプロパティで、このマウスイベントが発行されたときに shift キーが押されていたかどうかを示す論理値です。
1
12
1.5
1
18
1
x

MouseEvent.x プロパティは、 MouseEvent.clientX プロパティの別名です。
1
12
53
3.1
18
2
y

MouseEvent.y プロパティは、 MouseEvent.clientY プロパティの別名です。
1
12
53
3.1
18
2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 68 から、`auxclick` イベントがミドルクリック時の新しいタブのトリガーとして使われるようになりました。また、`auxclick` イベントハンドラはポップアップブロッカーをトリガーすることなくポップアップを開くことができるようになりました。
注釈 1件
実装メモ
  • Firefox 68 以降、Firefox はプライマリマウスボタン以外のボタンに対して `click` イベントを不正に送信しなくなりました。一例として、リンクを中クリックすると、ドキュメントの `<html>` 要素に `click` イベントが送信されます。
注釈 1件
実装メモ
  • Firefox 68 からは、仕様により `dblclick` イベントはプライマリマウスボタンのみに送信されます。
注釈 1件
実装メモ
  • Chrome 19以前では、`click()`はボタンと入力にのみ定義されています。
注釈 2件
実装メモ
  • Firefox 5以前では、`click()`はボタンと入力にのみ定義され、テキストとファイルの入力には影響しません。
  • Firefox 75 からは、要素が DOM ツリーにアタッチされていない場合でも `click()` 関数が動作するようになりました。
注釈 1件
実装メモ
  • Chrome Android 25以前では、`click()`はボタンと入力にのみ定義されています。
注釈 1件
実装メモ
  • OSにより制限があります。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (37)
対応条件
  • ベンダープレフィックス付きで対応: webkit (22)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (41)
対応条件
  • ベンダープレフィックス付きで対応: moz (1)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (8)
対応条件
  • ベンダープレフィックス付きで対応: webkit (6)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (37)
対応条件
  • ベンダープレフィックス付きで対応: webkit (22)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (41)
対応条件
  • ベンダープレフィックス付きで対応: moz (1)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (8)
対応条件
  • ベンダープレフィックス付きで対応: webkit (6)

基本構文

HTML 
document.getElementById('target').addEventListener('click', (e) => {
  console.log('Click position:', e.clientX, e.clientY);
});
document.addEventListener('mousemove', (e) => {
  console.log('Mouse movement:', e.pageX, e.pageY);
});

ライブデモ

Mouseevent. type

Click, mouseover, mousedown equal. Mouseevent visualize.

プレビュー全画面表示

Mousecoordinates. Read

Real-time to mousecoordinates tracking. with mousemove

プレビュー全画面表示

Event. emitorder

Mouseoperation time. Eventemitorder.

プレビュー全画面表示

実務での使いどころ

  • Mouse events の活用

    auxclick イベントは、ポインティングデバイスの第 1 ボタン以外のボタン（マウスの第 1 の—通常は左端の—ボタン）が同じ要素（Element）内で押されて離されたとき、その要素で発行されます。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク