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 イベントはその下にある要素で発生していました。このライブサンプルを参照してください。

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

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

<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}`;
});

結果

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

仕様書

仕様書	状態
UI Events	草案
Document Object Model (DOM) Level 3 Events Specification click の定義	廃止された
Document Object Model (DOM) Level 2 Events Specification click の定義	廃止された

ブラウザーの互換性

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`click` event	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 6 補足完全対応 6 補足補足 Beginning in Firefox 68, Firefox no longer incorrectly sends a `click` event for buttons other than the primary mouse button; previouly, there were circumstances in which this would occur. One example: middle-clicking a link would send a `click` to the document's `<html>` element.	IE 完全対応 9	Opera 完全対応 11.6	Safari 完全対応 3	WebView Android 完全対応 1	Chrome Android 完全対応 18	Firefox Android 完全対応 6	Opera Android 完全対応 12.1	Safari iOS 完全対応 1	Samsung Internet Android 完全対応 1.0
On disabled form elements	Chrome 完全対応あり補足完全対応あり補足補足 Only works for `<textarea>` elements and some `<input>` element types.	Edge 完全対応 79 補足完全対応 79 補足補足 Only works for `<textarea>` elements and some `<input>` element types.	Firefox 未対応なし	IE 完全対応あり補足完全対応あり補足補足 Internet Explorer only triggers the `click` event on `<input>` elements of type `checkbox` or `radio` when the element is double-clicked.	Opera 完全対応あり補足完全対応あり補足補足 Only works for `<textarea>` elements and some `<input>` element types.	Safari ?	WebView Android 完全対応あり補足完全対応あり補足補足 Only works for `<textarea>` elements and some `<input>` element types.	Chrome Android 完全対応あり補足完全対応あり補足補足 Only works for `<textarea>` elements and some `<input>` element types.	Firefox Android 未対応なし	Opera Android 完全対応あり補足完全対応あり補足補足 Only works for `<textarea>` elements and some `<input>` element types.	Safari iOS ?	Samsung Internet Android 完全対応あり補足完全対応あり補足補足 Only works for `<textarea>` elements and some `<input>` element types.

凡例

完全対応: 完全対応
未対応: 未対応
実装状況不明: 実装状況不明
実装ノートを参照してください。: 実装ノートを参照してください。