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; を設定する。
  • ダミーの onclick="void(0)" 属性を、その要素または <body> 以外の祖先のいずれかに設定する。
  • 通常は対話型になる要素 (例えば <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.textContent = `Click count: ${event.detail}`;
});

結果

ボタンを素早く何度もクリックしてみて、クリックカウントを増やしましょう。クリックの間に休憩を挟むと、カウントがリセットされます。

仕様書

Specification
UI Events
# event-type-click
HTML Standard
# handler-onclick

ブラウザーの互換性

BCD tables only load in the browser

関連情報