Element: click イベント
===================

**`click`** イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。

ある要素でボタンが押され、ボタンが離される前にポインターが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。

`click` は `mousedown` および `mouseup` イベントの後、順番通りに発生します。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("click", (event) => {});

onclick = (event) => {};
```

イベント型
-----

`PointerEvent` です。 `MouseEvent` を継承しています。

Event

UIEvent

MouseEvent

PointerEvent

**メモ:** この仕様書の以前のバージョンでは、このイベントのイベント型は `MouseEvent` でした。 Firefox と Safari では今でもこの型で渡されます。

イベントプロパティ
---------

*親である `UIEvent` および `Event` から継承したプロパティもあります*。

`MouseEvent.altKey` 読取専用 

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

`MouseEvent.button` 読取専用 

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

`MouseEvent.buttons` 読取専用 

このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。

`MouseEvent.clientX` 読取専用 

ビューポート座標におけるマウスポインターの X 座標です。

`MouseEvent.clientY` 読取専用 

ビューポート座標におけるマウスポインターの 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` の別名です。

`PointerEvent.pointerId` 読取専用 

イベントの原因となっているポインターの一意の識別子。

`PointerEvent.width` 読取専用 

ポインターの接触形状の幅（X 軸上の大きさ、CSS ピクセル単位）。

`PointerEvent.height` 読取専用 

ポインターの接触形状の高さ（Y 軸上の大きさ、CSS ピクセル単位）。

`PointerEvent.pressure` 読取専用 

0 から 1 の範囲のポインター入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。

`PointerEvent.tangentialPressure` 読取専用 

ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）は `-1` から `1` の範囲で、 `0` はコントロールの中立位置です。

`PointerEvent.tiltX` 読取専用 

Y-Z 平面と、ポインター（ペン/スタイラスなど）軸と Y 軸の両方を含む平面との間の平面角度（度単位、`-90` から `90` の範囲）。

`PointerEvent.tiltY` 読取専用 

X-Z 平面と、ポインター（ペン/スタイラスなど）軸と X 軸の両方を含む平面との間の平面角度（度単位、`-90` から `90` の範囲）。

`PointerEvent.twist` 読取専用 

ポインター（ペン/スタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。

`PointerEvent.pointerType` 読取専用 

イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。

`PointerEvent.isPrimary` 読取専用 

ポインターがこのポインターの種類の主ポインターを表しているかどうかを示します。

使用上の注意
------

`click` のイベントハンドラーに渡される `PointerEvent` オブジェクトの `detail` プロパティには、 `target` がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は `detail` が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。

例
-

この例は `<button>` を連続してクリックした数を表示します。

### HTML


```html
<button>Click</button>
```

### JavaScript


```js
const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  button.textContent = `Click count: ${event.detail}`;
});
```

### 結果

ボタンを素早く何度もクリックしてみて、クリックカウントを増やしましょう。クリックの間に休憩を挟むと、カウントがリセットされます。

仕様書
---

| Specification |
| --- |
| UI Events # event-type-click |
| HTML Standard # handler-onclick |

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

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

関連情報
----

* イベントの紹介
* `auxclick`
* `contextmenu`
* `dblclick`
* `mousedown`
* `mouseup`
* `pointerdown`
* `pointerup`