Element: click イベント

click イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。

バブリング あり
キャンセル 可
インターフェイス MouseEvent
イベントハンドラープロパティ onclick

ボタンが要素上で押された後、離される前に要素の外側に移動した場合は、イベントは両方の要素を含む最も近い祖先要素で発生します。

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

使用上の注意

click のイベントハンドラーに渡される MouseEvent オブジェクトの detail プロパティには、 target がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は detail が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。

Internet Explorer

Internet Explorer 8 と 9 は、 background-color の計算値が transparent である要素が他の要素の上に重なった時、 click イベントを受け取らないというバグに悩まされていました。すべての click イベントはその下にある要素で発生していました。このライブサンプルを参照してください。

このバグの知られている回避方法は以下の通りです。

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 は以下の要素を通常対話型であるとみなします (したがって、このバグの影響を受けません)。

  • <a> (ただし href があるものに限る)
  • <area> (ただし href があるものに限る)
  • <button>
  • <img>
  • <input>
  • <label> (ただしフォームコントロールに関連付けられているものに限る)
  • <textarea>
  • このリストは不完全です。試験や調査を行って展開することで MDN にご協力ください。

例

この例は <button> を連続してクリックした数を表示します。

HTML

<button>Click</button>

JavaScript

const button = document.querySelector('button');

button.addEventListener('click', event => {
  button.innerHTML = `Click count: ${event.detail}`;
});

結果

高速にするために、繰り返してボタンをクリックするとクリックカウントを増加させます。クリック間に休みが入った場合は、カウントがリセットされます。

仕様書

ブラウザーの互換性

BCD tables only load in the browser

関連情報