Element: click イベント

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

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

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

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

構文

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

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

onclick = (event) => {};

イベント型

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

Event UIEvent MouseEvent PointerEvent

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

イベントプロパティ

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

PointerEvent.altitudeAngle 読取専用

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

PointerEvent.azimuthAngle 読取専用

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

PointerEvent.persistentDeviceId 読取専用

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

html
<button>クリック</button>

JavaScript

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

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

結果

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報