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 属性を指定してフォーカス可能にした他の要素は対象外となります。

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

clickmousedown および 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 読取専用 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

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
click event
Is a PointerEvent
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報