MouseEvent

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

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

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

コンストラクター

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

プロパティ

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

MouseEvent.altKey 読取専用
マウスイベントが発生したときに alt キーが押下されていれば、 true を返します。
MouseEvent.button 読取専用
マウスイベントが発生したときに押下されたボタンの番号 (もしあれば) です。
MouseEvent.buttons 読取専用
マウスイベントが発生したときに離されていたボタンの番号 (もしあれば) です。
MouseEvent.clientX 読取専用
ローカル (DOM content) 座標における、マウスポインターの X 座標。
MouseEvent.clientY 読取専用
ローカル (DOM content) 座標における、マウスポインターの 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.which 読取専用
マウスイベントが発生したときに押下されていたボタン。
MouseEvent.mozPressure 読取専用
イベントが生成されたとき、タッチデバイスやタブレットデバイスに与えられた圧力の大きさです。この値の範囲は、0.0 (最小圧力) から 1.0 (最大圧力) の間です。このプロパティは非推奨 (または非標準) なので、代わりに PointerEvent を使用し、 pressure プロパティを見てください。
MouseEvent.mozInputSource 読取専用
イベントを生成したデバイスの種類 (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() をご覧ください。
MouseEvent.initMouseEvent()
作成した MouseEvent の値を初期化します。イベントがすでにディスパッチされている場合は、何も行いません。

この例は、 DOM メソッドを使用してチェックボックスのクリックをシミュレーション (すなわち、プログラムで click イベントを生成) しています。

HTML

<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>

JavaScript

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementById("checkbox"); //element to click on
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // ハンドラで preventDefault を呼び出した場合
    alert("canceled");
  } else {
    // ハンドラで preventDefault を呼び出さない場合
    alert("not canceled");
  }
}
document.getElementById("button").addEventListener('click', simulateClick);

結果

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
MouseEvent の定義
草案 MouseEvent を long から double へ再定義。すなわち PointerEventpointerType がマウスの場合、 double になります。
Pointer Lock
MouseEvent の定義
勧告候補 Document Object Model (DOM) Level 3 Events SpecificationmovementX および movementY プロパティを追加。
CSS Object Model (CSSOM) View Module
MouseEvent の定義
草案 Document Object Model (DOM) Level 3 Events SpecificationoffsetX, offsetY, pageX, pageY, x, y プロパティを追加。 screen, page, client, coordinate (x / y) プロパティを long から double へ変更。
UI Events
MouseEvent の定義
草案
Document Object Model (DOM) Level 3 Events Specification
MouseEvent の定義
廃止された Document Object Model (DOM) Level 2 Events SpecificationMouseEvent() コンストラクタ、getModifierState() メソッド、buttons プロパティを追加。
Document Object Model (DOM) Level 2 Events Specification
MouseEvent の定義
廃止された 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MouseEventChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 3.1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
MouseEvent() constructorChrome 完全対応 47Edge 完全対応 ≤79Firefox 完全対応 11IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
altKeyChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
buttonChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 3.1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
buttonsChrome 完全対応 43Edge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Resrictions apply depending on OS.
IE 完全対応 9Opera 完全対応 ありSafari 完全対応 11.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 11.3Samsung Internet Android 未対応 なし
clientXChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 3.1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
clientYChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
ctrlKeyChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
getModifierStateChrome 完全対応 47Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 5.0
initMouseEvent
非推奨非標準
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
metaKeyChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
movementXChrome 完全対応 37
完全対応 37
未対応 22 — 37
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 13Firefox 完全対応 41
完全対応 41
未対応 1 — 41
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 9
完全対応 9
未対応 6 — 8
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 37
完全対応 37
未対応 ? — 37
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Chrome Android 完全対応 37
完全対応 37
未対応 ? — 37
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 41
完全対応 41
未対応 4 — 41
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 8
完全対応 8
未対応 6 — 8
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Samsung Internet Android 完全対応 3.0
完全対応 3.0
未対応 ? — 3.0
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
movementYChrome 完全対応 37
完全対応 37
未対応 22 — 37
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 13Firefox 完全対応 41
完全対応 41
未対応 1 — 41
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 9
完全対応 9
未対応 6 — 8
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 37
完全対応 37
未対応 ? — 37
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Chrome Android 完全対応 37
完全対応 37
未対応 ? — 37
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 41
完全対応 41
未対応 4 — 41
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 8
完全対応 8
未対応 6 — 8
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Samsung Internet Android 完全対応 3.0
完全対応 3.0
未対応 ? — 3.0
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
offsetX
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 39IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 43Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
offsetY
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 39IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 43Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
pageX
実験的
Chrome 完全対応 45Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
pageY
実験的
Chrome 完全対応 45Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
regionChrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤79
無効
完全対応 ≤79
無効
無効 From version ≤79: this feature is behind the Experimental Web Platform Features preference (needs to be set to true).
Firefox 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
relatedTargetChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 48IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
screenXChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
screenYChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
shiftKeyChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
which
非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 On mousemove events, the which property is incorrectly always set to 1.
IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 On mousemove events, the which property is incorrectly always set to 1.
Opera Android 完全対応 11Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
x
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 53IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 53Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
y
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 53IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 53Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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