click
イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。
バブリング | あり |
---|---|
キャンセル | 可 |
インターフェイス | MouseEvent |
イベントハンドラープロパティ | onclick |
ボタンが要素上で押された後、離される前に要素の外側に移動した場合は、イベントは両方の要素を含む最も近い祖先要素で発生します。
使用上の注意
click
のイベントハンドラーに渡される MouseEvent
オブジェクトの detail
プロパティには、 target
がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は detail
が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。
Internet Explorer
Internet Explorer 8 と 9 は、 background-color
の計算値が transparent
である要素が他の要素の上に重なった時、 click
イベントを受け取らないというバグに悩まされていました。すべての click
イベントはその下にある要素で発生していました。このライブサンプルを参照してください。
このバグの知られている回避方法は以下の通りです。
- IE9 のみの場合:
background-color
: rgba(0,0,0,0)
に設定するopacity
: 0
に設定し、background-color
を明示的にtransparent
以外に設定する
- IE8 および IE9 の場合:
filter: alpha(opacity=0);
に設定し、background-color
を明示的にtransparent
以外に設定する
Safari Mobile
Safari Mobile 7.0 以降では (おそらくそれ以前のバージョンも) 悩ましいバグがあり、通常は対話型ではない要素 (<div>
など) で、イベントリスナーが要素自身に直接設定されていない場合 (つまり、 イベントの委譲が使用されている場合) に click
イベントが発生しません。デモはこのライブ例を参照してください。 Safari's docs on making elements clickable および definition of "clickable element" も参照してください。
このバグの知られている回避策は以下のとおりです。
- 要素およびそのすべての祖先に
cursor
: pointer;
を設定する。 - 要素または
<body>
以外の祖先のいずれかに、ダミーのonclick="void(0)"
属性を設定する。 - 通常は対話型になる要素 (例えば
<a>
) を、通常は対話型でない要素 (例えば<div>
) の代わりに使用する。 click
イベントの委譲の使用をやめる。
Safari Mobile は以下の要素を通常対話型であるとみなします (したがって、このバグの影響を受けません)。
例
この例は <button>
を連続してクリックした数を表示します。
HTML
<button>Click</button>
JavaScript
const button = document.querySelector('button');
button.addEventListener('click', event => {
button.innerHTML = `Click count: ${event.detail}`;
});
結果
高速にするために、繰り返してボタンをクリックするとクリックカウントを増加させます。クリック間に休みが入った場合は、カウントがリセットされます。
仕様書
仕様書 | 状態 |
---|---|
UI Events | 草案 |
Document Object Model (DOM) Level 3 Events Specification click の定義 |
廃止された |
Document Object Model (DOM) Level 2 Events Specification click の定義 |
廃止された |
ブラウザーの互換性
BCD tables only load in the browser