MouseEvent
==========

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

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

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

Event

UIEvent

MouseEventコンストラクター
--------

`MouseEvent()`

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

静的プロパティ
-------

`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` 
Non-standard
 読取専用 

通常のクリックに必要な最小圧力。

`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` 
Non-standard
 読取専用 

強めのクリック (force click) に必要な最小圧力。

インスタンスプロパティ
-----------

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

`MouseEvent.altKey` 読取専用 

マウスイベントが発行されたときに `alt` キーが押下されていれば `true` を返します。

`MouseEvent.button` 読取専用 

マウスイベントが発行されたときに押下されたボタンの番号 (もしあれば) です。

`MouseEvent.buttons` 読取専用 

マウスイベントが発行されたときに離されていたボタンの番号 (もしあれば) です。

`MouseEvent.clientX` 読取専用 

ローカル (DOM コンテンツ) 座標における、マウスポインターの X 座標です。

`MouseEvent.clientY` 読取専用 

ローカル (DOM コンテンツ) 座標における、マウスポインターの Y 座標です。

`MouseEvent.ctrlKey` 読取専用 

マウスイベントが発行されたときに `control` キーが押下されていれば、 `true` を返します。

`MouseEvent.layerX` 
Non-standard
 読取専用 

現在のレイヤーを基準としたイベントの水平座標を返します。

`MouseEvent.layerY` 
Non-standard
 読取専用 

現在のレイヤーを基準としたイベントの垂直座標を返します。

`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.relatedTarget` 読取専用 

イベントのセカンダリターゲットがあれば、それを表します。

`MouseEvent.screenX` 読取専用 

グローバル (スクリーン) 座標における、マウスポインターの X 座標。

`MouseEvent.screenY` 読取専用 

グローバル (スクリーン) 座標における、マウスポインターの Y 座標。

`MouseEvent.shiftKey` 読取専用 

マウスイベントが発行されたときに `shift` キーが押下されていれば、`true` を返します。

`MouseEvent.mozInputSource` 
Non-standard
 読取専用 

 イベントを生成した機器の種類 (`MOZ_SOURCE_*` 定数のいずれか)。
 これにより、例えばマウスイベントが実際のマウスによって発行されたのか、あるいはタッチイベントによって発行されたのかを識別できます (これは、イベントに関連する座標を解釈する際の正確さに影響を与えるでしょう)。


`MouseEvent.webkitForce` 
Non-standard
 読取専用 

クリック時に与えられた圧力。

`MouseEvent.x` 読取専用 

`MouseEvent.clientX` の別名。

`MouseEvent.y` 読取専用 

`MouseEvent.clientY` の別名。

インスタンスメソッド
----------

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

`MouseEvent.getModifierState()`

指定した修飾キーの現在の状態を返します。詳しくは `KeyboardEvent.getModifierState`() をご覧ください。

`MouseEvent.initMouseEvent()` 
非推奨

作成した `MouseEvent` の値を初期化します。イベントがすでに発行されている場合は、何も行いません。

例
-

 この例では、 DOM メソッドを使ってチェックボックスのクリック（プログラムによるクリックイベントの生成）をシミュレートしています。
 イベントの状態（キャンセルされたかどうか）は、メソッド `EventTarget.dispatchEvent()` の返値で判断されます。

### HTML


```html
<p>
  <label><input type="checkbox" id="checkbox" /> チェック</label>
</p>
<p>
  <button id="button">
    クリックすると MouseEvent をチェックボックスに送信します
  </button>
</p>
```

### JavaScript


```js
function simulateClick() {
  // クリックイベントを送るために要素を取得
  const cb = document.getElementById("checkbox");

  // クリックイベントの MouseEvent を合成
  let evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  // イベントをチェックボックス要素に送信
  cb.dispatchEvent(evt);
}
document.getElementById("button").addEventListener("click", simulateClick);
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # interface-mouseevent |
| CSSOM View Module # extensions-to-the-mouseevent-interface |
| Pointer Lock 2.0 # extensions-to-the-mouseevent-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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