MouseEvent

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

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

WheelEvent および DragEvent という特定用途向けイベントが、MouseEvent から派生しています。

コンストラクタ

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 (最大圧力) の間です。
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 イベントを生成する) しています。

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementById("checkbox"); // クリックする要素
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // ハンドラで preventDefault を呼び出した場合
    alert("canceled");
  } else {
    // ハンドラで preventDefault を呼び出さない場合
    alert("not canceled");
  }
}
document.getElementById("button").addEventListener('click', simulateClick);
<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>

ボタンをクリックすると、サンプルの動作を確認できます:

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
MouseEvent.region の定義
現行の標準 Document Object Model (DOM) Level 3 Events Specificationregion プロパティを追加。
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 SpecificationoffsetXoffsetYpageXpageYxy プロパティを追加。
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 の定義
勧告 最初期の定義

ブラウザ実装状況

機能 Firefox (Gecko) Edge Chrome Internet Explorer Opera Safari
基本サポート (有) (有) (有) (有) (有) (有)
movementX
movementY
(有) moz (有) (有) ? (有) ?
buttons (有) (有) 43 ? ? 未サポート
which 1.0 (有) 1.0 9.0 5.0 1.0
getModifierState() 15 (15) (有) (有) (有) (有) (有)
mozPressuremozInputSource 4.0 (2) ? 未サポート 未サポート 未サポート 未サポート
MouseEvent() 11 (11) ? (有) 9.0 (有) ?
MouseEvent.region 32 (32) ? ? ? ? ?
MouseEvent.offsetXMouseEvent.offsetY 40 (40) 9 ? ? ? ?
機能 Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, fscholz
 最終更新者: yyss,