recursal/MDN huggingface dataset:
MouseEvent: pageX プロパティ
=======================

**`pageX`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、マウスがクリックされた位置の X（水平）座標を、文書全体の左端からの相対座標で返します。
 これには文書の現在見えていない範囲にあるものも含みます。

 文書の端をそのまま基準とするため、このプロパティは、ページの水平方向のスクロールを加味します。
 例えば、文書の左側 200 ピクセルが隠れるようにページがスクロールされ、ビューの左端から 100 ピクセル内側でマウスがクリックされた場合、 `pageX` が返す値は 300 となります。

 元々、このプロパティは `long` 型の整数として定義されていましたが、 CSSOM View モジュール では、 `double` 型の浮動小数点値として再定義しています。
 詳しくはブラウザーの互換性の節を参照してください。

この方法で指定された座標について詳しくは、座標系を参照してください。

値
-

マウスがクリックされた*文書*の左端からのピクセル数を示す浮動小数点値。スクロールやビューポートによる位置決めはが有効であるかに関わらず。

 このプロパティは、もともと Touch Events 仕様では long 型の整数として規定されていましたが、 CSSOM View モジュールではサブピクセルの精度が利用できるようにするために倍精度浮動小数点数として再定義されました。
 JavaScript では数値型はどちらも `Number` 型で表現されますが、ブラウザーのコード内部では異なる扱いを受ける可能性があり、結果として動作に差異が生じる可能性があります。

どのブラウザーが改訂されたデータ型を使用するように更新されているかはブラウザーの互換性を参照してください。

例
-

### ページ原点に対するマウスの位置を表示

 それでは、ページの原点に対するマウスの位置を示す簡単な例を見てみましょう。
 この例は `<iframe>` の中で表示されているので、その左上隅はブラウザーウィンドウではなく、フレームの左上隅になります。

#### HTML


```html
<div class="box">
  <p>このボックス内でマウスを動かして、座標の変化を確認してください。</p>
  <p><code>pageX</code>: <span id="x">n/a</span></p>
  <p><code>pageY</code>: <span id="y">n/a</span></p>
</div>
```


 HTML は単純です。マウスイベントを監視するボックスには `"box"` クラスが設定されています。
 ここには 2 つの `<span>` 要素があり、一つは ID が `"x"` で、もう一つは ID が `"y"` です。
 これらはイベントが発生するたびに、ページに対するマウスの最新座標で更新されます。

#### CSS

この例で使用される CSS は以下の通りです。


```css
.box {
  width: 400px;
  height: 250px;
  border: 2px solid darkblue;
  background-color: blue;
  color: white;
  font:
    16px "Zilla",
    "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}
```


#### JavaScript


```js
const box = document.querySelector(".box");
const pageX = document.getElementById("x");
const pageY = document.getElementById("y");

function updateDisplay(event) {
  pageX.innerText = event.pageX;
  pageY.innerText = event.pageY;
}

box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);
```


JavaScript では、 `addEventListener()` を使用して、 `updateDisplay()` 関数を `mousemove`, `mouseenter`, `mouseleave` の各イベントのイベントハンドラーとして登録しています。

`updateDisplay()` は、 X と Y の座標を格納するための `<span>` 要素の内容を `pageX` と `pageY` の値で置き換えます。

#### 結果

こちらで試してみてください。

### その他の例

利用可能なすべての座標系における情報を示す例は、マウス位置へのアクセス方法で見ることができます。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-pagex |

CSSOM View 仕様書に追加される前、限られた一部のブラウザーで短期間、 `pageX` と `pageY` は `UIEvent` インターフェイス上で使用することができました。

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

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

関連情報
----

* `MouseEvent.pageY`
MouseEvent: clientY プロパティ
=========================

**`clientY`** は `MouseEvent` の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションのビューポートにおける垂直座標を定義します（ページにおける座標ではありません）。

例えば、ビューポートの上端をクリックすると、そのページが垂直方向にスクロールしているかどうかにかかわらず、常に `clientY` の値が `0` のマウスイベントが発生します。

値
-

`double` の浮動小数点値です。

例
-

この例では、 `mousemove` イベントが発生するたびに、マウスの座標を表示します。

### HTML


```html
<p>マウスを動かして位置を確認してください。</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-clienty |

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

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

関連情報
----

* `MouseEvent`
* `clientX`
* `screenX` /
 `screenY`
MouseEvent: relatedTarget プロパティ
===============================

**`MouseEvent.relatedTarget`** は読み取り専用プロパティで、もしあれば、マウスイベントの副ターゲットを表します。

すなわち、

| イベント名 | `target` | `relatedTarget` |
| --- | --- | --- |
| `mouseenter` | ポインティングデバイスが入った `EventTarget` | ポインティングデバイスが離れた `EventTarget` |
| `mouseleave` | ポインティングデバイスが離れた `EventTarget` | ポインティングデバイスが入った `EventTarget` |
| `mouseout` | ポインティングデバイスが離れた `EventTarget` | ポインティングデバイスが入った `EventTarget` |
| `mouseover` | ポインティングデバイスが入った `EventTarget` | ポインティングデバイスが離れた `EventTarget` |
| `dragenter` | ポインティングデバイスが入った `EventTarget` | ポインティングデバイスが離れた `EventTarget` |
| `dragleave` | ポインティングデバイスが離れた `EventTarget` | ポインティングデバイスが入った `EventTarget` |

 副ターゲットがないイベントでは、 `relatedTarget` は
 `null` を返します。

`FocusEvent.relatedTarget` はフォーカスイベントでの同様のプロパティです。

値
-

`EventTarget` オブジェクトまたは `null` です。

例
-

赤と青のボックスを出たり入ったりしてみてください。

### HTML


```html
<body id="body">
  <div id="outer">
    <div id="red"></div>
    <div id="blue"></div>
  </div>
  <p id="log"></p>
</body>
```

### CSS


```css
#outer {
  width: 250px;
  height: 125px;
  display: flex;
}

#red {
  flex-grow: 1;
  background: red;
}

#blue {
  flex-grow: 1;
  background: blue;
}

#log {
  max-height: 120px;
  overflow-y: scroll;
}
```

### JavaScript


```js
const mouseoutLog = document.getElementById("log"),
  red = document.getElementById("red"),
  blue = document.getElementById("blue");

red.addEventListener("mouseover", overListener);
red.addEventListener("mouseout", outListener);
blue.addEventListener("mouseover", overListener);
blue.addEventListener("mouseout", outListener);

function outListener(event) {
  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";

  mouseoutLog.innerText = `\nfrom ${event.target.id} into ${related} ${mouseoutLog.innerText}`;
}

function overListener(event) {
  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";

  mouseoutLog.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-relatedtarget |

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

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

関連情報
----

* `MouseEvent`
* イベントターゲットの比較
MouseEvent: clientX プロパティ
=========================

**`clientX`** は `MouseEvent` の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションのビューポートにおける水平座標を定義します（ページにおける座標ではありません）。

例えば、ビューポートの左端をクリックすると、そのページが水平方向にスクロールしているかどうかにかかわらず、常に `clientX` の値が `0` のマウスイベントが発生します。

値
-

`double` の浮動小数点値です。

例
-

この例では、 `mousemove` イベントが発生するたびに、マウスの座標を表示します。

### HTML


```html
<p>マウスを動かして位置を確認してください。</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-clientx |

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

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

関連情報
----

* `MouseEvent`
* `clientY`
* `screenX` /
 `screenY`
MouseEvent: buttons プロパティ
=========================

**`MouseEvent.buttons`** は読み取り専用のプロパティで、マウスイベントが発行されたときにマウス（またはその他の入力機器）のどのボタンが押されていたかを示します。

 押されている可能性があるそれぞれのボタンは、数字で表されます（下図参照）。
 複数のボタンが押された場合は、ボタンの値を足し合わせて新しい数値が生成されます。
 例えば、副ボタン（`2`）と補助ボタン（`4`）を同時に押した場合、その値は`6`（すなわち、`2 + 4`）となります。


**メモ:** このプロパティを `MouseEvent.button` プロパティと混同しないでください。
 `MouseEvent.buttons` プロパティはあらゆる種類のマウスイベントの際に押されていたボタンの状態を示すのに対して、
 `MouseEvent.button` プロパティは 1 つまたは複数のボタンを押したか離したことによって引き起こされたマウスイベントのみ、正しい値を保証します。


値
-

 1 つまたは複数のボタンを表す数値です。
 複数のボタンが同時に押されていた場合、値が組み合わされます（例えば、 `3` は主ボタン＋副ボタンです）。

* `0`: ボタンが押されていない、または初期化されていない
* `1`: 主ボタン (通常は左ボタン)
* `2`: 副ボタン (通常は右ボタン)
* `4`: 補助ボタン (通常はマウスホイールボタンまたは中央ボタン)
* `8`: 第四ボタン (通常は「ブラウザーで戻る」ボタン)
* `16` : 第五ボタン (通常は「ブラウザーで進む」ボタン)
例
-

この例では、 `mousedown` イベントを発行したときに `buttons` プロパティを記録します。

### HTML


```html
<p>1 つまたは複数のボタンでどこかをクリックしてください</p>
<pre id="log">buttons: </pre>
```

### JavaScript


```js
let log = document.createTextNode("?"); // let log = new Text('?');

function logButtons(e) {
  log.data = `${e.buttons} (${e.type})`; // log.nodeValue= `${e.buttons} (${e.type})`;
}

document.addEventListener("mouseup", logButtons);
document.addEventListener("mousedown", logButtons);
// document.addEventListener('mousemove', logButtons);

document.querySelector("#log").appendChild(log);
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-buttons |

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

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

### Firefox のメモ

Firefox は `buttons` 属性に Windows, Linux (GTK), macOS で対応していますが、以下の制限があります。

* ユーティリティで、ボタン操作のカスタマイズをすることができます。
 したがって、*主ボタン*は機器の左ボタンではない、*副ボタン*は右ボタンではない、などということもありえます。
 また、中（ホイール）ボタン、第四ボタン、第五ボタンは、押されても値が割り当てられないかもしれません。
* 単一ボタンの機器では、ボタンとキーボードの押下の組み合わせで追加のボタンをエミュレートすることができます。
* タッチ機器では、設定可能なジェスチャー（例えば、 1 本指タッチで「主ボタン」、2 本指タッチで「副ボタン」等）でボタンをエミュレートすることができます。
* Linux (GTK) では、第四ボタンと第五ボタンには対応していません。
 加えて `mouseup` イベントでは、常に `buttons` の値に離したボタンの情報を含みます。
* Mac OS X 10.5 では、 `buttons` 属性は常に `0` を返します。プラットフォームの API がこの機能を実装していないからです。
関連情報
----

* `MouseEvent`
MouseEvent: ctrlKey プロパティ
=========================

**`MouseEvent.ctrlKey`** は読み取り専用のプロパティで、このマウスイベントが発生した際に `Ctrl` キーが押されていたかどうかを示す論理値です。

Macintosh のキーボードでは、このキーは `control` キーと表記されています。また、 Mac では `control` キーと組み合わせたクリックは、オペレーティングシステムに拾われてコンテキストメニューを開くのに使われるので、 `ctrlKey` はクリックイベントで検出されないことに注意してください。

値
-

論理値で、 `true` はキーが押されていたことを示し、 `false` はキーが押されていなかったことを示します。

例
-

この例では、 `mousemove` イベントを発生させた際に `ctrlKey` プロパティを記録します。

### HTML


```html
<p id="log">カーソルが動いていたときに Ctrl キーが押されていた: false</p>
```

### JavaScript


```js
const log = document.querySelector("#log");
window.addEventListener("mousemove", logKey);

function logKey(e) {
  log.textContent = `カーソルが動いていたときに Ctrl キーが押されていた: ${e.ctrlKey}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-ctrlkey |

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

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

関連情報
----

* `MouseEvent`
MouseEvent: MouseEvent() コンストラクター
=================================

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

構文
--


```js
new MouseEvent(type)
new MouseEvent(type, options)
```

### 値

`type`

 文字列で、イベントの名前を表します。
 大文字小文字の区別があり、ブラウザーは `dblclick`, `mousedown`, `mouseenter`, `mouseleave`, `mousemove`, `mouseout`, `mouseover`, `mouseup` の何れかに設定します。


`options` 省略可

オブジェクトで、 *`UIEvent()` で定義されたプロパティに加え*、以下のプロパティを設定することができます。

`screenX` 省略可

 数値で、既定値は `0` であり、ユーザーの画面におけるこのマウスイベントの水平位置です。
 この値を設定しても、マウスポインターは移動しません。


`screenY` 省略可

 数値で、既定値は `0` であり、ユーザーの画面におけるこのマウスイベントの垂直位置です。
 この値を設定しても、マウスポインターは移動しません。


`clientX` 省略可

 数値で、既定値は `0` であり、ユーザーの画面のクライアントウィンドウにおけるマウスイベントの水平位置です。
 この値を設定しても、マウスポインターは移動しません。


`clientY` 省略可

 数値で、既定値は `0` であり、ユーザーの画面のクライアントウィンドウにおけるマウスイベントの垂直位置です。
 この値を設定しても、マウスポインターは移動しません。


`ctrlKey` 省略可

論理値で、既定値は `false` であり、 `ctrl` キーが同時に押されていたかどうかを示します。

`shiftKey` 省略可

論理値で、既定値は `false` であり、 `shift` キーが同時に押されていたかどうかを示します。

`altKey` 省略可

論理値で、既定値は `false` であり、 `alt` キーが同時に押されていたかどうかを示します。

`metaKey` 省略可

論理値で、既定値は `false` であり、 `meta` キーが同時に押されていたかどうかを示します。

`button` 省略可

数値で、既定値は `0` であり、ボタンの押下や解放に関連するイベント時に、どのボタンが押されたかを示します。

| 値 | 意味 |
| --- | --- |
| `0` | 主ボタン（通常は左ボタン）が押された、または初期化されていない |
| `1` | 予備ボタン（通常は中ボタン）が押された |
| `2` | 副ボタン（通常は右ボタン）が押された |

`buttons` 省略可

数値で、既定値は `0` であり、イベントが発行されたときに押されたボタンを示します。

| ビットフィールド値 | 意味 |
| --- | --- |
| `0` | ボタンが押されていない |
| `1` | 主ボタン（通常は左ボタン）が押されていた |
| `2` | 副ボタン（通常は右ボタン）が押されていた |
| `4` | 予備ボタン（通常は中ボタン）が押されていた |

`relatedTarget` 省略可

`EventTarget` で、既定値は `null` であり、離れた要素
 (`mouseenter` や `mouseover` の場合)
 または、入った要素 (`mouseout` や `mouseleave` の場合) です。


`region` 
Non-standard
 省略可

 文字列で、既定値は `null` であり、そのイベントによって影響を受けたヒット領域の ID です。
 影響を受けるヒット領域がない場合は `null` 値で表現されます。


実装によっては、 screen と client フィールドに数字以外のものを渡すと、 `TypeError` が発生することがあります。

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-mouseevent |

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

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

関連情報
----

* `MouseEvent`: 構築するオブジェクトのインターフェイス
MouseEvent: screenX プロパティ
=========================

**`screenX`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、グローバル（スクリーン）座標における、マウスポインターの水平方向の座標（オフセット）を示します。

**メモ:** マルチスクリーン環境では、水平方向に並べられた画面が単一の機器として扱われ、 `screenX` の範囲に画面の幅が加算されることがあります。

値
-

`double` の浮動小数点値です。

これを定義する早期の版の仕様書では、ピクセル数を表す整数として定義していました。

例
-

この例では、 `mousemove` イベントが発行されるたびにマウスの座標を表示します。

### HTML


```html
<p>マウスを動かして、位置を確認してください。</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 結果

### イベントのルーティング

ウィンドウや文書、範囲の要素にイベントをトラップすると、次の例のように、そのイベント（クリックなど）の座標を取得して、適切にルーティングすることができます。


```js
function checkClickMap(e) {
  if (e.screenX < 50) doRedButton();
  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
  if (e.screenX >= 100) doRedButton();
}
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-screenx |

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

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

関連情報
----

* `MouseEvent`
* `screenY`
* `clientX` / `clientY`
MouseEvent: movementX プロパティ
===========================

**`movementX`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、直前の `mousemove` イベントとこのイベントのマウスポインターの X 座標の差を示します。このプロパティの値は `currentEvent.movementX = currentEvent.screenX - previousEvent.screenX` のように計算されます。

**警告:** ブラウザーは `movementX` と `screenX` に 仕様で定義されているものとは異なる単位を使用します。ブラウザーとオペレーティングシステムによって、 `movementX` の単位は物理ピクセルであったり、論理ピクセルであったり、 CSS ピクセルであったりします。

値
-

数値です。 `mousemove` 以外の `MouseEvent` では常に 0 です。

例
-

この例は `movementX` と `movementY` を使用して、マウスの移動量を記録します。

### HTML


```html
<p id="log">マウスを動かしてください。</p>
```

### JavaScript


```js
function logMovement(event) {
  log.insertAdjacentHTML(
    "afterbegin",
    `移動量: ${event.movementX}, ${event.movementY}<br>`,
  );
  while (log.childNodes.length > 128) log.lastChild.remove();
}

const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);
```

### 結果

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0 # dom-mouseevent-movementx |

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

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

関連情報
----

* `MouseEvent.movementY`
* `MouseEvent`
* ポインターロック
MouseEvent: pageY プロパティ
=======================

**`pageY`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、マウスがクリックされた位置の Y （垂直）座標を、文書全体の相対座標で返します。
 このプロパティはページの垂直スクロールを加味します。

値
-

`double` 型の浮動小数点値。

例
-


```js
let pageY = event.pageY;
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-pagey |

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

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

関連情報
----

* `MouseEvent.pageX`
MouseEvent: shiftKey プロパティ
==========================

**`MouseEvent.shiftKey`** は読み取り専用のプロパティで、このマウスイベントが発行されたときに `shift` キーが押されていたかどうかを示す論理値です。

値
-

論理値で、 `true` はキーが押されていたことを示し、 `false` はキーが押されていなかったことを示します。

例
-

この例では、 `click` イベントを発生させた際に `shiftKey` プロパティを記録します。

### HTML


```html
<p>
  <code>shiftKey</code> プロパティを試験するためにどこかをクリックしてください。
</p>
<p id="log"></p>
```

### JavaScript


```js
let log = document.querySelector("#log");
document.addEventListener("click", logKey);

function logKey(e) {
  log.textContent = `Shift キーの押下状態: ${e.shiftKey}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-shiftkey |

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

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

関連情報
----

* `MouseEvent`
MouseEvent: initMouseEvent() メソッド
=================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`MouseEvent.initMouseEvent()`** メソッドは、いったん（通常は `Document.createEvent()` メソッドで）生成されたマウスイベントの値を初期化します。

**警告:** このメソッドは非推奨になったので、今後は使用しないでください。

 代わりに `MouseEvent()` など、特定のイベントのコンストラクターを使用してください。
 イベントの作成と起動のページに、使用方法についての詳しい情報があります。


 この方法で初期化されるイベントは、 `Document.createEvent()` メソッドで作成されたものでなければなりません。
 このメソッドは、 `EventTarget.dispatchEvent()` を使用してイベントが配信される前に、イベントを設定するために呼び出す必要があります。

構文
--


```js
initMouseEvent(type, canBubble, cancelable, view,
                     detail, screenX, screenY, clientX, clientY,
                     ctrlKey, altKey, shiftKey, metaKey,
                     button, relatedTarget)
```

### 引数

`type`

 このイベントの種別 (`type`) を設定する文字列です。
 マウスイベントで使用可能な種別には、 `click`, `mousedown`,
 `mouseup`, `mouseover`, `mousemove`,
 `mouseout` があります。


`canBubble`

このイベントがバブリングできるかどうかです。 `Event.bubbles` の値を設定します。

`cancelable`

 このイベントの既定のアクションを止めることができるかどうかです。
 `Event.cancelable` の値を設定します。


`view`

 このイベントの AbstractView です。ここでは `window` オブジェクトを渡す必要があります。
 `UIEvent.view` の値を設定します。


`detail`

このイベントのマウスクリック回数です。 `UIEvent.detail` の値を設定します。

`screenX`

 このイベントのスクリーン X 座標です。
 `MouseEvent.screenX` の値を設定します。


`screenY`

 このイベントのスクリーン Y 座標です。
 `MouseEvent.screenY` の値を設定します。


`clientX`

 このイベントのクライアント X 座標です。
 `MouseEvent.clientX` の値を設定します。


`clientY`

 このイベントのクライアント Y 座標です。
 `MouseEvent.clientY` の値を設定します。


`ctrlKey`

 このイベント中に `control` キーが押されていたかどうか。
 `MouseEvent.ctrlKey` の値を設定します。


`altKey`

 このイベント中に `alt` キーが押されていたかどうか。
 `MouseEvent.altKey` の値を設定します。


`shiftKey`

 このイベント中に `shift` キーが押されていたかどうか。
 `MouseEvent.shiftKey` の値を設定します。


`metaKey`

 このイベント中に `meta` キーが押されていたかどうか。
 `MouseEvent.metaKey` の値を設定します。


`button`

このイベントのマウスボタン (`button`)。

`relatedTarget`

 このイベントに関連する EventTarget。
 一部のイベント種別 (例えば `mouseover` や `mouseout`) でのみ使用されます。
 それ以外の場合は `null` を渡してください。


### 返値

なし (`undefined`)。

例
-

### HTML


```html
<div style="background:red; width:180px; padding:10px;">
  <div id="out"></div>
  <input type="text" />
</div>
```

### JavaScript


```js
document.body.onclick = (event) => {
  const elementTag = event.target.tagName.toLowerCase();
  document.getElementById("out").innerHTML = elementTag;
};

const simulateClick = () => {
  const event = document.createEvent("MouseEvents");
  event.initMouseEvent(
    "click",
    true,
    true,
    window,
    0,
    0,
    0,
    80,
    20,
    false,
    false,
    false,
    false,
    0,
    null,
  );
  document.body.dispatchEvent(event);
};

simulateClick();
```

### 結果

仕様書
---

この機能は仕様書に含まれていません。標準化路線から外れました。

代わりに `MouseEvent()` コンストラクターを使用してください。

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

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

関連情報
----

* `MouseEvent()` コンストラクター:
 `MouseEvent` を生成するための新しい標準の方法
* `Event.initEvent()` は似た目的を実現するより単純なメソッドです。
 こちらも廃止されており、使用するべきではありません。
MouseEvent: WEBKIT\_FORCE\_AT\_MOUSE\_DOWN 静的プロパティ
==================================================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`** は非公式な WebKit 固有の静的な数値プロパティで、通常クリックの最小圧力の値です。

`WEBKIT_FORCE_AT_MOUSE_DOWN` は `MouseEvent` の静的プロパティなので、常に `MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` として使用してください。 `MouseEvent` インターフェイスのプロパティとしては使用できません。

仕様書
---

*どの仕様書にもありません。* Apple は Mac Developer Library で説明しています。

関連情報
----

* `MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`
* `MouseEvent.webkitForce`
* Force Touch events (en-US)
MouseEvent: mozInputSource プロパティ
================================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.mozInputSource`** は `MouseEvent` の読み取り専用プロパティで、イベントを発生させた機器の種類を示す情報を提供します。
 これにより、例えばマウスイベントが実際のマウスによって発生したのか、それともタッチイベントによって発生したのかを判断することができます（イベントに関連する座標を解釈する精度に影響を与える可能性があります）。

値
-

以下の値を利用することができます。

| 定数名 | 値 | 説明 |
| --- | --- | --- |
| `MOZ_SOURCE_UNKNOWN` | 0 | 入力機器が不明です。 |
| `MOZ_SOURCE_MOUSE` | 1 | このイベントはマウス（またはマウスのような機器）によって生成されました。 |
| `MOZ_SOURCE_PEN` | 2 | このイベントはタブレット上のペンによって生成されました。 |
| `MOZ_SOURCE_ERASER` | 3 | このイベントはタブレット上の消しゴムによって生成されました。 |
| `MOZ_SOURCE_CURSOR` | 4 | このイベントはカーソルによって生成されました。 |
| `MOZ_SOURCE_TOUCH` | 5 | このイベントはタッチインターフェイスによって生成されました。 |
| `MOZ_SOURCE_KEYBOARD` | 6 | このイベントはキーボードによって生成されました。 |

仕様書
---

どの仕様書にも含まれていません。

関連情報
----

* `MouseEvent`
MouseEvent: offsetX プロパティ
=========================

**`offsetX`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、マウスポインターの X 座標におけるこのイベントと対象ノードのパディング辺との間のオフセットを提供します。

値
-

`double` 型の浮動小数点値です。

仕様書の早期の版では、整数として定義されていました。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-offsetx |

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

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

関連情報
----

* `MouseEvent`
MouseEvent: x プロパティ
===================

**`MouseEvent.x`** プロパティは、 `MouseEvent.clientX` プロパティの別名です。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-x |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MouseEvent: layerY プロパティ
========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`MouseEvent.layerY`** は読み取り専用のプロパティで、現在のレイヤーに関連するイベントの垂直座標を返します。

このプロパティは、ページのスクロールを考慮し、文書全体からの相対値を返します。ただし、位置指定された要素内でイベントが発生した場合は、位置指定された要素の左上からの相対値が返されます。

値
-

整数値で、マウスイベントが発生したときのマウスポインターのピクセル単位の Y 座標です。

例
-


```html
<html lang="en">
  <head>
    <title>pageX\pageY & layerX\layerY example</title>

    <script>
 function showCoords(evt) {
 const form = document.forms.form\_coords;
 const parent\_id = evt.target.parentNode.id;
 form.parentId.value = parent\_id;
 form.pageXCoords.value = evt.pageX;
 form.pageYCoords.value = evt.pageY;
 form.layerXCoords.value = evt.layerX;
 form.layerYCoords.value = evt.layerY;
 }
 </script>

    <style>
 #d1 {
 border: solid blue 1px;
 padding: 20px;
 }

 #d2 {
 position: absolute;
 top: 180px;
 left: 80%;
 right: auto;
 width: 40%;
 border: solid blue 1px;
 padding: 20px;
 }

 #d3 {
 position: absolute;
 top: 240px;
 left: 20%;
 width: 50%;
 border: solid blue 1px;
 padding: 10px;
 }
 </style>
  </head>

  <body onmousedown="showCoords(event)">
    <p>To display the mouse coordinates please click anywhere on the page.</p>

    <div id="d1">
      <span>
        This is an un-positioned div so clicking it will return layerX/layerY
        values almost the same as pageX/PageY values.
      </span>
    </div>

    <div id="d2">
      <span>
        This is a positioned div so clicking it will return layerX/layerY values
        that are relative to the top-left corner of this positioned element.
        Note the pageX\pageY properties still return the absolute position in
        the document, including page scrolling.
      </span>

      <span>
        Make the page scroll more! This is a positioned div so clicking it will
        return layerX/layerY values that are relative to the top-left corner of
        this positioned element. Note the pageX\pageY properties still return
        the absolute position in the document, including page scrolling.
      </span>
    </div>

    <div id="d3">
      <form name="form\_coords" id="form1">
        <label for="parentId">Parent Element id: </label>
        <input type="text" name="parentId" size="7" /><br />
        <label for="pageXCoords">pageX: </label>
        <input type="text" name="pageXCoords" size="7" />
        <label for="pageYCoords">pageY: </label>
        <input type="text" name="pageYCoords" size="7" /><br />
        <label for="layerXCoords">layerX: </label>
        <input type="text" name="layerXCoords" size="7" />
        <label for="layerYCoords">layerY: </label>
        <input type="text" name="layerYCoords" size="7" />
      </form>
    </div>
  </body>
</html>
```

仕様書
---

*This property is not part of any specification.*

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

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