MouseEvent

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

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

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

Event UIEvent MouseEvent

コンストラクター

MouseEvent()

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

プロパティ

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

MouseEvent.altKey 読取専用

マウスイベントが発行されたときに alt キーが押下されていれば true を返します。

MouseEvent.button 読取専用

マウスイベントが発行されたときに押下されたボタンの番号 (もしあれば) です。

MouseEvent.buttons 読取専用

マウスイベントが発行されたときに離されていたボタンの番号 (もしあれば) です。

MouseEvent.clientX 読取専用

ローカル (DOM コンテンツ) 座標における、マウスポインターの X 座標です。

MouseEvent.clientY 読取専用

ローカル (DOM コンテンツ) 座標における、マウスポインターの Y 座標です。

MouseEvent.ctrlKey 読取専用

マウスイベントが発行されたときに control キーが押下されていれば、 true を返します。

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.region 読取専用

イベントの影響を受けたヒット領域の ID を返します。影響を受けたヒット領域がない場合は、null を返します。

MouseEvent.relatedTarget 読取専用

イベントのセカンダリターゲットがあれば、それを表します。

MouseEvent.screenX 読取専用

グローバル (スクリーン) 座標における、マウスポインターの X 座標。

MouseEvent.screenY 読取専用

グローバル (スクリーン) 座標における、マウスポインターの Y 座標。

MouseEvent.shiftKey 読取専用

マウスイベントが発行されたときに shift キーが押下されていれば、true を返します。

MouseEvent.mozPressure 読取専用

イベントが発行されたとき、タッチ機器やタブレット機器に与えられた圧力の大きさです。この値の範囲は、0.0 (最小圧力) から 1.0 (最大圧力) の間です。 このプロパティは非推奨 (かつ標準外) であり、代わりに PointerEvent を使用し、 pressure プロパティを参照してください。

MouseEvent.mozInputSource (en-US) 読取専用

イベントを生成した機器の種類 (MOZ_SOURCE_* 定数のいずれか)。 これにより、例えばマウスイベントが実際のマウスによって発行されたのか、あるいはタッチイベントによって発行されたのかを識別できます (これは、イベントに関連する座標を解釈する際の正確さに影響を与えるでしょう)。

MouseEvent.webkitForce 読取専用

クリック時に与えられた圧力。

MouseEvent.x 読取専用

MouseEvent.clientX の別名。

MouseEvent.y 読取専用

MouseEvent.clientY の別名。

定数<

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN 読取専用

通常のクリックに必要な最小圧力。

MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN 読取専用

強めのクリック (force click)に必要な最小圧力。

メソッド

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

MouseEvent.getModifierState()

指定した修飾キーの現在の状態を返します。詳しくは KeyboardEvent.getModifierState (en-US)() をご覧ください。

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 (CSSOM View)
# extensions-to-the-mouseevent-interface
Pointer Lock 2.0
# extensions-to-the-mouseevent-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 直近の親である UIEvent
  • PointerEvent: マルチタッチを含む拡張されたポインターイベント