MouseEvent

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

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

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

コンストラクター

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

プロパティ

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

MouseEvent.altKey 読取専用
マウスイベントが発生したときに alt キーが押下されていれば、 true を返します。
MouseEvent.button 読取専用
マウスイベントが発生したときに押下されたボタンの番号 (もしあれば) です。
MouseEvent.buttons 読取専用
マウスイベントが発生したときに離されていたボタンの番号 (もしあれば) です。
MouseEvent.clientX 読取専用
ローカル (DOM content) 座標における、マウスポインターの X 座標。
MouseEvent.clientY (en-US) 読取専用
ローカル (DOM content) 座標における、マウスポインターの Y 座標。
MouseEvent.ctrlKey 読取専用
マウスイベントが発生したときに control キーが押下されていれば、 true を返します。
MouseEvent.metaKey (en-US) 読取専用
マウスイベントが発生したときに meta キーが押下されていれば、 true を返します。
MouseEvent.movementX (en-US) 読取専用
前の mousemove (en-US) イベントの位置に対して相対的な、マウスポインタの X 座標。
MouseEvent.movementY (en-US) 読取専用
前の mousemove (en-US) イベントの位置に対して相対的な、マウスポインタの Y 座標。
MouseEvent.offsetX (en-US) 読取専用
対象ノードのパディング境界の位置に対して相対的な、マウスポインタの X 座標。
MouseEvent.offsetY (en-US) 読取専用
対象ノードのパディング境界の位置に対して相対的な、マウスポインタの Y 座標。
MouseEvent.pageX (en-US) 読取専用
ドキュメント全体に対して相対的な、マウスポインタの X 座標。
MouseEvent.pageY (en-US) 読取専用
ドキュメント全体に対して相対的な、マウスポインタの Y 座標。
MouseEvent.region (en-US) 読取専用
イベントの影響を受けたヒット領域の ID を返します。影響を受けたヒット領域がない場合は、null を返します。
MouseEvent.relatedTarget (en-US) 読取専用
イベントのセカンダリターゲットがあれば、それを表します。
MouseEvent.screenX 読取専用
グローバル (スクリーン) 座標における、マウスポインタの X 座標。
MouseEvent.screenY (en-US) 読取専用
グローバル (スクリーン) 座標における、マウスポインタの Y 座標。
MouseEvent.shiftKey 読取専用
マウスイベントが発生したときに shift キーが押下されていれば、true を返します。
MouseEvent.which 読取専用
マウスイベントが発生したときに押下されていたボタン。
MouseEvent.mozPressure 読取専用
イベントが生成されたとき、タッチデバイスやタブレットデバイスに与えられた圧力の大きさです。この値の範囲は、0.0 (最小圧力) から 1.0 (最大圧力) の間です。このプロパティは非推奨 (または非標準) なので、代わりに PointerEvent を使用し、 pressure プロパティを見てください。
MouseEvent.mozInputSource (en-US) 読取専用
イベントを生成したデバイスの種類 (MOZ_SOURCE_* 定数のいずれか)。これにより、例えばマウスイベントが実際のマウスによって発生したのか、あるいはタッチイベントによって発生したのかを識別できます (これは、イベントに関連する座標を解釈する際の正確さに影響を与えるでしょう)。
MouseEvent.webkitForce (en-US) 読取専用
クリック時に与えられた圧力。
MouseEvent.x (en-US) 読取専用
MouseEvent.clientX の別名。
MouseEvent.y (en-US) 読取専用
MouseEvent.clientY (en-US) の別名。

定数

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN (en-US) 読取専用
通常のクリックに必要な最小圧力。
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN (en-US) 読取専用
強めのクリック (force click)に必要な最小圧力。

メソッド

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

MouseEvent.getModifierState() (en-US)
指定した修飾キーの現在の状態を返します。詳しくは KeyboardEvent.getModifierState (en-US)() をご覧ください。
MouseEvent.initMouseEvent() (en-US)
作成した 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 の定義
廃止 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報

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