Element: click イベント

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

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

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

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

使用上の注意

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

結果

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

仕様書

仕様書 状態
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
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
click eventChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 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 完全対応 9Opera 完全対応 11.6Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 6Opera Android 完全対応 12.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
On disabled form elementsChrome 完全対応 あり
補足
完全対応 あり
補足
補足 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.

凡例

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

関連情報