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.
click
イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。
ある要素でボタンが押され、ボタンが離される前にポインターが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("click", (event) => {});
onclick = (event) => {};
イベント型
PointerEvent
です。 MouseEvent
を継承しています。
メモ:
この仕様書の以前のバージョンでは、このイベントのイベント型は MouseEvent
でした。 Firefox と Safari では今でもこの型で渡されます。
イベントプロパティ
親である UIEvent
および Event
から継承したプロパティもあります。
MouseEvent.altKey
読取専用-
このマウスイベントが発行されたときに alt キーが押されていた場合は
true
を返します。 -
このマウスイベントが発行されたときに押されていたボタンの番号です(もしあれば)。
-
このマウスイベントが発行されたときに押されていたボタンです(もしあれば)。
MouseEvent.clientX
読取専用-
ビューポート座標におけるマウスポインターの X 座標です。
MouseEvent.clientY
読取専用-
ビューポート座標におけるマウスポインターの Y 座標です。
MouseEvent.ctrlKey
読取専用-
このマウスイベントが発行されたときに control キーが押されていた場合は
true
を返します。 MouseEvent.layerX
非標準 読取専用-
このイベントの現在のレイヤーにおける相対の水平座標を返します。
MouseEvent.layerY
非標準 読取専用-
このイベントの現在のレイヤーにおける相対の垂直座標を返します。
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.screenX
読取専用-
スクリーン座標におけるマウスポインターの X 座標です。
MouseEvent.screenY
読取専用-
スクリーン座標におけるマウスポインターの Y 座標です。
MouseEvent.shiftKey
読取専用-
このマウスイベントが発行されたときに shift キーが押されていた場合は
true
を返します。 MouseEvent.mozInputSource
非標準 読取専用-
イベントを発生させた機器の種類(
MOZ_SOURCE_*
定数のいずれか)。 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます(これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません)。 MouseEvent.webkitForce
非標準 読取専用-
クリックしたときに適用された圧力です。
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
<button>Click</button>
JavaScript
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