MouseEvent - マウスイベント

2017/10/08

MouseEventは、マウス操作に関連するイベントで取り扱われるインターフェイスです。

概要

名前

MouseEvent

継承

Event
UIEvent
MouseEvent

IDL

[Constructor(DOMString type, optional MouseEventInit eventInitDict), Exposed=Window]
interface MouseEvent : UIEvent {
  readonly attribute long screenX;
  readonly attribute long screenY;
  readonly attribute long clientX;
  readonly attribute long clientY;

  readonly attribute boolean ctrlKey;
  readonly attribute boolean shiftKey;
  readonly attribute boolean altKey;
  readonly attribute boolean metaKey;

  readonly attribute short button;
  readonly attribute unsigned short buttons;

  readonly attribute EventTarget? relatedTarget;

  boolean getModifierState(DOMString keyArg);
};

dictionary MouseEventInit : EventModifierInit {
  long screenX = 0;
  long screenY = 0;
  long clientX = 0;
  long clientY = 0;

  short button = 0;
  unsigned short buttons = 0;
  EventTarget? relatedTarget = null;
};

partial dictionary MouseEventInit {
    long movementX = 0;
    long movementY = 0;
};

partial dictionary MouseEventInit {
  double screenX = 0.0;
  double screenY = 0.0;
  double clientX = 0.0;
  double clientY = 0.0;
};

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

dictionary UIEventInit : EventInit {
  Window? view = null;
  long detail = 0;
};

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};

// Pointer Lock
partial interface MouseEvent {
    readonly attribute long movementX;
    readonly attribute long movementY;
};

// CSSOM View Module
partial interface MouseEvent {
  readonly attribute double screenX;
  readonly attribute double screenY;
  readonly attribute double pageX;
  readonly attribute double pageY;
  readonly attribute double clientX;
  readonly attribute double clientY;
  readonly attribute double x;
  readonly attribute double y;
  readonly attribute double offsetX;
  readonly attribute double offsetY;
};

仕様書

https://w3c.github.io/uievents/#mouseevent

https://w3c.github.io/pointerlock/#extensions-to-the-mouseevent-interface (Pointer Lock)

https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface (CSSOM View Module)

チュートリアル

MouseEventは、clickイベントやmouseoverイベントなどでコールバック関数に渡されるオブジェクトです。

var callbackFn = function ( event ) {
	console.log( event ) ;
}

element.onclick = callbackFn ;
element.onmouseover = callbackFn ;

コンストラクタ

MouseEvent()

新しいMouseEventのオブジェクトを作成します。

プロパティ

altKey

イベント発生時にaltキーが押されているか否かを返します。

button

イベントが、どのポインタデバイスのボタンで発生したかを表す数値を返します。

buttons

イベント中、どのポインタデバイスのボタンを押しているかを表す数値を返します。

clientX

イベントが発生したクライアント上の、ポインタの水平方向の位置を返します。

clientY

イベントが発生したクライアント上の、ポインタの垂直方向の位置を返します。

ctrlKey

イベント発生時にcontrolキーが押されているか否かを返します。

metaKey

イベント発生時にmetaキーが押されているか否かを返します。

movementX

前回発生したイベントと今回発生したイベントとの間で、ポインタが水平方向に移動した距離を返します。

movementY

前回発生したイベントと今回発生したイベントとの間で、ポインタが垂直方向に移動した距離を返します。

offsetX

イベントの発信源となるオブジェクトの、padding-leftの左端からポインタまでの水平方向の距離を返します。

offsetY

イベントの発信源となるオブジェクトの、padding-topの上端からポインタまでの垂直方向の距離を返します。

pageX

ドキュメント上の、ポインタの水平方向の位置を返します。

pageY

ドキュメント上の、ポインタの垂直方向の位置を返します。

relatedTarget

イベントに関連する要素を返します。

screenX

スクリーン上の、ポインタの水平方向の位置を返します。

screenY

スクリーン上の、ポインタの垂直方向の位置を返します。

shiftKey

イベント発生時にShiftキーが押されているか否かを返します。

x

clientXと同じです。

y

clientYと同じです。

メソッド

getModifierState()

引数のキーを押しているか否かを返します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Features	Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
MouseEvent	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
altKey	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
button	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
buttons	● 43+	● 15+	×	●	● 9+	● 30+	×	×
clientX	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
clientY	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
ctrlKey	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
getModifierState()	● 47+	● 15+	×	●	● 9+	● 34+	×	×
metaKey	● 19+	● 5+	● 6.0+	●	● 9+	●	● 6.0+	● 4.3+
MouseEvent()	● 26+	● 11+	● 7.1+	●	×	● 16+	● 7.0+	● 4.4+
movementX	● 37+	● 41+	● 10+	●	×	● 24+	×	▲ 4.4+
movementY	● 37+	● 41+	● 10+	●	×	● 24+	×	▲ 4.4+
offsetX	● 19+	● 39+	● 6.0+	●	●	●	● 6.0+	● 4.3+
offsetY	● 19+	● 39+	● 6.0+	●	●	●	● 6.0+	● 4.3+
pageX	● 19+	● 5+	● 6.0+	●	● 9+	●	● 6.0+	● 4.3+
pageY	● 19+	● 5+	● 6.0+	●	● 9+	●	● 6.0+	● 4.3+
relatedTarget	● 19+	● 5+	● 6.0+	●	● 9+	●	● 6.0+	● 4.3+
screenX	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
screenY	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
shiftKey	● 19+	● 5+	● 6.0+	●	●	●	● 6.0+	● 4.3+
x	● 19+	● 53+	● 6.0+	●	●	●	● 6.0+	● 4.3+
y	● 19+	● 53+	● 6.0+	●	●	●	● 6.0+	● 4.3+