MouseEvent
MouseEvent
インターフェイスは、ポインティングデバイス (マウスなど) によるユーザの対話によって発生したイベントを表します。このインターフェイスを使用する一般的なイベントとして click
, dblclick
, mouseup
, mousedown
があります。
MouseEvent
は UIEvent
から派生しており、これはさらに 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 へ再定義。すなわち PointerEvent の pointerType がマウスの場合、 double になります。 |
Pointer Lock MouseEvent の定義 |
勧告候補 | Document Object Model (DOM) Level 3 Events Specification に movementX および movementY プロパティを追加。 |
CSS Object Model (CSSOM) View Module MouseEvent の定義 |
草案 | Document Object Model (DOM) Level 3 Events Specification に offsetX , 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 Specification に MouseEvent() コンストラクタ、getModifierState() メソッド、buttons プロパティを追加。 |
Document Object Model (DOM) Level 2 Events Specification MouseEvent の定義 |
廃止 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 直近の親である
UIEvent
. PointerEvent
: マルチタッチを含む拡張されたポインターイベント