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()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("click", (event) => {});
onclick = (event) => {};
イベント型
PointerEvent
です。 MouseEvent
を継承しています。
メモ:
この仕様書の以前のバージョンでは、このイベントのイベント型は 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
<button>クリック</button>
JavaScript
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
click event | ||||||||||||
Is a PointerEvent |
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.