MouseEvent()

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

MouseEvent() コンストラクタは、新しい MouseEvent を作成します。

シンタックス

 event = new MouseEvent(typeArg, mouseEventInit);

typeArg
イベント名を表す DOMString です。
mouseEventInit Optional
Is a MouseEventInit dictionary, having the following fields:
  • "screenX", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer.
  • "screenY", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer.
  • "clientX", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the client window of user's screen; setting this value doesn't move the mouse pointer.
  • "clientY", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the client window of the user's screen; setting this value doesn't move the mouse pointer.
  • "ctrlKey", optional and defaulting to false, of type Boolean, that indicates if the ctrl key was simultaneously pressed.
  • "shiftKey", optional and defaulting to false, of type Boolean, that indicates if the shift key was simultaneously pressed.
  • "altKey", optional and defaulting to false, of type Boolean, that indicates if the alt key was simultaneously pressed.
  • "metaKey", optional and defaulting to false, of type Boolean, that indicates if the meta key was simultaneously pressed.
  • "button", optional and defaulting to 0, of type short, that describes which button is pressed during events related to the press or release of a button:
    Value Meaning
    0 Main button pressed (usually the left button) or un-initialized
    1 Auxiliary button pressed (usually the middle button)
    2 Secondary button pressed (usually the right button)
  • "buttons", optional and defaulting to 0, of type unsigned short, that describes which buttons are pressed when the event is launched:
    Bit-field value Meaning
    0 No button pressed
    1 Main button pressed (usually the left button)
    2 Secondary button pressed (usually the right button)
    4 Auxiliary button pressed (usually the middle button)
  • "relatedTarget", optional and defaulting to null, of type EventTarget, that is the element just left (in case of  a mouseenter or mouseover) or is entering (in case of a mouseout or mouseleave).
  • "region", optional and defaulting to null, of type DOMString, is the id of the hit region affected by the event. The absence of any hit region is affected, is represented by the null value.

実装によっては、スクリーンとクライアントのフィールドに数値以外のものを渡すと TypeError がスローされます。

MouseEventInit ディクショナリは、UIEventInitEventInit ディクショナリのフィールドも受け入れます。

仕様

仕様書 ステータス コメント
CSS Object Model (CSSOM) View Module
MouseEvent の定義
草案 画面とクライアントのフィールド long を double に再定義しました。
Document Object Model (DOM) Level 3 Events Specification
MouseEvent() の定義
廃止された 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MouseEvent() constructorChrome 完全対応 47Edge 完全対応 ≤79Firefox 完全対応 11IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
Redefined mouseEventInit fields from long to doubleChrome 完全対応 56Edge 完全対応 ≤79Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android 完全対応 56Chrome Android 完全対応 56Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 6.0
Support for mouseEventInit optional region fieldChrome 完全対応 51
補足 無効
完全対応 51
補足 無効
補足 Flag needed to retrieve value from MouseEvent.region.
無効 From version 51: 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
補足 無効
補足 Flag needed to retrieve value from MouseEvent.region.
無効 From version ≤79: this feature is behind the Experimental Web Platform Features preference (needs to be set to true).
Firefox 完全対応 32IE 未対応 なしOpera ? Safari ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 32Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

ポリフィル

Internet Explorer 9 以降の MouseEvent() コンストラクタ機能は、以下のコードでポリフィルすることができます。

(function (window) {
  try {
    new MouseEvent('test');
    return false; // ポリフィル不要
  } catch (e) {
		// ポリフィルの必要性 - 落下
  }

    // ポリフィル DOM4 MouseEvent
	var MouseEventPolyfill = function (eventType, params) {
		params = params || { bubbles: false, cancelable: false };
		var mouseEvent = document.createEvent('MouseEvent');
		mouseEvent.initMouseEvent(eventType, 
			params.bubbles,
			params.cancelable,
			window,
			0,
			params.screenX || 0,
			params.screenY || 0,
			params.clientX || 0,
			params.clientY || 0,
			params.ctrlKey || false,
			params.altKey || false,
			params.shiftKey || false,
			params.metaKey || false,
			params.button || 0,
			params.relatedTarget || null
		);

		return mouseEvent;
	}

	MouseEventPolyfill.prototype = Event.prototype;

	window.MouseEvent = MouseEventPolyfill;
})(window);

あわせて参照

  • MouseEvent, は、それが構築するオブジェクトのインターフェイス