MouseEvent
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
MouseEvent
インターフェイスは、ポインティングデバイス (マウスなど) によるユーザーの操作によって発行されたイベントを表します。
このインターフェイスを使用する一般的なイベントとして click
, dblclick
, mouseup
, mousedown
があります。
MouseEvent
は UIEvent
から派生しており、これはさらに Event
から派生しています。後方互換性のために MouseEvent.initMouseEvent()
メソッドは維持されていますが、 MouseEvent
オブジェクトを作成する際は MouseEvent()
コンストラクターを使用するべきです。
MouseEvent
からは、 WheelEvent
、DragEvent
、PointerEvent
などの特定用途向けイベントが派生しています。
コンストラクター
MouseEvent()
-
MouseEvent
オブジェクトを生成します。
静的プロパティ
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
Non-standard 読取専用-
通常のクリックに必要な最小圧力。
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
Non-standard 読取専用-
強めのクリック (force click) に必要な最小圧力。
インスタンスプロパティ
このインターフェイスは、親インターフェイスである UIEvent
および Event
のプロパティも継承しています。
MouseEvent.altKey
読取専用-
マウスイベントが発行されたときに alt キーが押下されていれば
true
を返します。 -
マウスイベントが発行されたときに押下されたボタンの番号 (もしあれば) です。
-
マウスイベントが発行されたときに離されていたボタンの番号 (もしあれば) です。
MouseEvent.clientX
読取専用-
ローカル (DOM コンテンツ) 座標における、マウスポインターの X 座標です。
MouseEvent.clientY
読取専用-
ローカル (DOM コンテンツ) 座標における、マウスポインターの Y 座標です。
MouseEvent.ctrlKey
読取専用-
マウスイベントが発行されたときに control キーが押下されていれば、
true
を返します。 MouseEvent.layerX
Non-standard 読取専用-
現在のレイヤーを基準としたイベントの水平座標を返します。
MouseEvent.layerY
Non-standard 読取専用-
現在のレイヤーを基準としたイベントの垂直座標を返します。
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.screenX
読取専用-
グローバル (スクリーン) 座標における、マウスポインターの X 座標。
MouseEvent.screenY
読取専用-
グローバル (スクリーン) 座標における、マウスポインターの Y 座標。
MouseEvent.shiftKey
読取専用-
マウスイベントが発行されたときに shift キーが押下されていれば、
true
を返します。 MouseEvent.mozInputSource
Non-standard 読取専用-
イベントを生成した機器の種類 (
MOZ_SOURCE_*
定数のいずれか)。 これにより、例えばマウスイベントが実際のマウスによって発行されたのか、あるいはタッチイベントによって発行されたのかを識別できます (これは、イベントに関連する座標を解釈する際の正確さに影響を与えるでしょう)。 MouseEvent.webkitForce
Non-standard 読取専用-
クリック時に与えられた圧力。
MouseEvent.x
読取専用-
MouseEvent.clientX
の別名。 MouseEvent.y
読取専用-
MouseEvent.clientY
の別名。
インスタンスメソッド
このインターフェイスは、親インターフェイスである UIEvent
および Event
のメソッドも継承しています。
MouseEvent.getModifierState()
-
指定した修飾キーの現在の状態を返します。詳しくは
KeyboardEvent.getModifierState
() をご覧ください。 MouseEvent.initMouseEvent()
非推奨-
作成した
MouseEvent
の値を初期化します。イベントがすでに発行されている場合は、何も行いません。
例
この例では、 DOM メソッドを使ってチェックボックスのクリック(プログラムによるクリックイベントの生成)をシミュレートしています。
イベントの状態(キャンセルされたかどうか)は、メソッド EventTarget.dispatchEvent()
の返値で判断されます。
HTML
<p>
<label><input type="checkbox" id="checkbox" /> チェック</label>
</p>
<p>
<button id="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);
結果
仕様書
Specification |
---|
UI Events # interface-mouseevent |
CSSOM View Module # extensions-to-the-mouseevent-interface |
Pointer Lock 2.0 # extensions-to-the-mouseevent-interface |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 直近の親である
UIEvent
PointerEvent
: マルチタッチを含む拡張されたポインターイベント