要素は以下のような場面でclick イベントを受け取ります。

• ポインターが要素内に位置している間、ポインティングデバイスのボタン（マウスの第一ボタンなど）が押され、離されたとき。
• 要素上でタッチジェスチャーが実行されたとき。
• クリックと同等のユーザー操作が行われたとき。例えば要素にフォーカスがあるときにSpace キーやEnter キーが押されたとき。 なお、これは既定でキーイベントハンドラーを持つ要素のみに適用されるため、tabindex 属性を指定してフォーカス可能にした他の要素は対象外となります。

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

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

このイベントは機器に依存しないイベントです。つまり、タッチ、キーボード、マウス、支援技術などで指定された方法でも起動できるということです。

構文

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

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

イベント型

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

イベントプロパティ

このインターフェイスは、MouseEvent およびEvent からプロパティを継承しています。

PointerEvent.altitudeAngle読取専用

トランスデューサー（ポインターまたはスタイラス）の軸と機器の画面の X-Y 平面のなす角度を表します。

PointerEvent.azimuthAngle読取専用

Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。

PointerEvent.persistentDeviceId読取専用Experimental

PointerEvent を生成するポインティングデバイス用の固有の識別子。

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

<button>クリック</button>

JavaScript

const button = document.querySelector("button");button.addEventListener("click", (event) => {  button.textContent = `クリック回数: ${event.detail}`;});

結果

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

仕様書

ブラウザーの互換性

関連情報

• 学習: イベント入門
• auxclick
• contextmenu
• dblclick
• mousedown
• mouseup
• pointerdown
• pointerup