MouseEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

MouseEvent インターフェイスは、ポインティングデバイス (マウスなど) によるユーザーの操作によって発行されたイベントを表します。このインターフェイスを使用する一般的なイベントとしてclick,dblclick,mouseup,mousedown があります。

MouseEvent はUIEvent から派生しており、これはさらにEvent から派生しています。後方互換性のためにMouseEvent.initMouseEvent() メソッドは維持されていますが、MouseEvent オブジェクトを作成する際はMouseEvent() コンストラクターを使用するべきです。

MouseEvent からは、WheelEvent、DragEvent、PointerEvent などの特定用途向けイベントが派生しています。

コンストラクター

MouseEvent(): MouseEvent オブジェクトを生成します。

静的プロパティ

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN非標準読取専用: 通常のクリックに必要な最小圧力。
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN非標準読取専用: 強めのクリック (force click) に必要な最小圧力。

インスタンスプロパティ

このインターフェイスは、親インターフェイスであるUIEvent およびEvent のプロパティも継承しています。

MouseEvent.altKey読取専用: マウスイベントが発行されたときにalt キーが押下されていればtrue を返します。
MouseEvent.button読取専用: マウスイベントが発行されたときに押されたまたは離されたボタンの番号です。(関連するイベントのみ)
MouseEvent.buttons読取専用: マウスイベントが発行されたときに押されていたボタンの番号 (もしあれば) です。
MouseEvent.clientX読取専用: ローカル (DOM コンテンツ) 座標における、マウスポインターの X 座標です。
MouseEvent.clientY読取専用: ローカル (DOM コンテンツ) 座標における、マウスポインターの Y 座標です。
MouseEvent.ctrlKey読取専用: マウスイベントが発行されたときにcontrol キーが押下されていれば、true を返します。
MouseEvent.layerX非標準読取専用: 現在のレイヤーを基準としたイベントの水平座標を返します。
MouseEvent.layerY非標準読取専用: 現在のレイヤーを基準としたイベントの垂直座標を返します。
MouseEvent.metaKey読取専用: マウスイベントが発行されたときにmeta キーが押下されていれば、true を返します。
MouseEvent.movementX読取専用: 直前のmousemove イベントの位置から相対的な、マウスポインターの X 座標です。
MouseEvent.movementY読取専用: 直前のmousemove イベントの位置から相対的な、マウスポインターの Y 座標です。
MouseEvent.offsetX読取専用: 対象ノードのパディング辺の位置に対して相対的なマウスポインターの X 座標です。
MouseEvent.offsetY読取専用: 対象ノードのパディング辺の位置に対して相対的なマウスポインターの Y 座標です。
MouseEvent.pageX読取専用: 文書全体に対して相対的な、マウスポインターの X 座標です。
MouseEvent.pageY読取専用: 文書全体に対して相対的な、マウスポインターの Y 座標です。
MouseEvent.relatedTarget読取専用: イベントのセカンダリターゲットがあれば、それを表します。
MouseEvent.screenX読取専用: グローバル (スクリーン) 座標における、マウスポインターの X 座標。
MouseEvent.screenY読取専用: グローバル (スクリーン) 座標における、マウスポインターの Y 座標。
MouseEvent.shiftKey読取専用: マウスイベントが発行されたときにshift キーが押下されていれば、true を返します。
MouseEvent.mozInputSource非標準読取専用: イベントを生成した機器の種類 (MOZ_SOURCE_* 定数のいずれか)。これにより、例えばマウスイベントが実際のマウスによって発行されたのか、あるいはタッチイベントによって発行されたのかを識別できます (これは、イベントに関連する座標を解釈する際の正確さに影響を与えるでしょう)。
MouseEvent.webkitForce非標準読取専用: クリック時に与えられた圧力。
MouseEvent.x読取専用: MouseEvent.clientX の別名。
MouseEvent.y読取専用: MouseEvent.clientY の別名。

インスタンスメソッド

このインターフェイスは、親インターフェイスであるUIEvent およびEvent のメソッドも継承しています。

MouseEvent.getModifierState(): 指定した修飾キーの現在の状態を返します。詳しくはKeyboardEvent.getModifierState() をご覧ください。
MouseEvent.initMouseEvent()非推奨;: 作成したMouseEvent の値を初期化します。イベントがすでに発行されている場合は、何も行いません。

例

この例では、 DOM メソッドを使ってチェックボックスのクリック（プログラムによるクリックイベントの生成）をシミュレートしています。イベントの状態（キャンセルされたかどうか）は、メソッドEventTarget.dispatchEvent() の返値で判断されます。

HTML

html

<p>  <label><input type="checkbox" /> チェック</label></p><p>  <button>    クリックすると MouseEvent をチェックボックスに送信します  </button></p>

JavaScript

function simulateClick() {  // クリックイベントを送るために要素を取得  const cb = document.getElementById("checkbox");  // クリックイベントの MouseEvent を合成  let evt = new MouseEvent("click", {    bubbles: true,    cancelable: true,    view: window,  });  // イベントをチェックボックス要素に送信  cb.dispatchEvent(evt);}document.getElementById("button").addEventListener("click", simulateClick);