click

ジャンプ先:
  1. 全般情報
  2. プロパティ
  3. 例
  4. ブラウザーの対応
  5. 関連情報

click イベントは、ポインティングデバイスのボタン（ふつうはマウスの第一ボタン）が、単一の要素上で押されて離されたときに呼び出されます。

全般情報

仕様書 DOM L3
インターフェイス MouseEvent
バブリング あり
キャンセル可能 可
対象 Element
既定の動作 様々

プロパティ

プロパティ 型 説明
target 読取専用 EventTarget イベントの対象（DOM ツリー内の最上位の対象）。
type 読取専用 DOMString イベントの種類。
bubbles 読取専用 Boolean イベントが通常バブリングするかどうか
cancelable 読取専用 Boolean イベントがキャンセルできるかどうか
view 読取専用 WindowProxy document.defaultView （文書の window）
detail 読取専用 long (float) 短時間に連続してクリックが行われた数、1から増加する。
currentTarget 読取専用 EventTarget イベントリスナーが割り当てられたノード。
relatedTarget 読取専用 EventTarget mouseover, mouseout, mouseenter, mouseleave イベントの場合: 補完的なイベントの対象（mouseenter イベントの場合は mouseleave の対象）。それ以外のイベントでは null。
screenX 読取専用 long グローバル（スクリーン）座標におけるマウスポインターの X 座標。
screenY 読取専用 long グローバル（スクリーン）座標におけるマウスポインターの Y 座標。
clientX 読取専用 long ローカル（DOM コンテンツ）座標におけるマウスポインターの X 座標。
clientY 読取専用 long ローカル（DOM コンテンツ）座標におけるマウスポインターの Y 座標。
button 読取専用 unsigned short マウスイベントが呼び出されたときに押されていたボタン番号。左ボタン=0、中央ボタン=1（もしある場合）、右ボタン=2。マウスが左手用に構成されていて、ボタン操作が反転している場合は、値は右から左へと読み替える。
buttons 読取専用 unsigned short マウスイベントが呼び出されていたときに押されていたマウスボタン。左ボタン=1、右ボタン=2、中央ボタン（ホイール）=4、第4ボタン（ふつうは「ブラウザーの戻る」ボタン）=8、第5ボタン（ふつうは「ブラウザーの進む」ボタン）=16。2つ以上のボタンが押されていた場合は、各値の論理和を返します。例えば、左ボタンと右ボタンが押されていれば、3 (=1 | 2) を返す。詳しくはこちら。
mozPressure 読取専用 float イベントが生成されたときのタッチまたはタブデバイスに対する圧力の量。値の範囲は 0.0 （最小圧力）から 1.0 （最大圧力）まで。
ctrlKey 読取専用 boolean イベントが発生したときに Ctrl キーが押されていれば true。そうでなければ false。
shiftKey 読取専用 boolean イベントが発生したときに Shift キーが押されていれば true。そうでなければ false。
altKey 読取専用 boolean イベントが発生したときに Alt キーが押されていれば true。そうでなければ false。
metaKey 読取専用 boolean イベントが発生したときにメタキーが押されていれば true。そうでなければ false。

例

<div id="test"></div>

<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // display the current click count inside the clicked div
    event.target.textContent = "click count: " + event.detail;
  }, false);
</script>

ブラウザーの対応

Internet Explorer

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

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

Safari Mobile

Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. <div>) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of "clickable element".

Known workarounds for this bug:

  • Set cursor: pointer; on the element or any of its ancestors.
  • Add a dummy onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>.
  • Use a typically interactive element (e.g. <a>) instead of one that isn't typically interactive (e.g. <div>).
  • Stop using click event delegation.

Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):

  • <a> (but it must have an href)
  • <area> (but it must have an href)
  • <button>
  • <img>
  • <input>
  • <label> (but it must be associated with a form control)
  • <textarea>
  • This list is incomplete; you can help MDN by doing further testing/research and expanding it.

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから！

機能 Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
基本対応 (有) (有) (有) (有) (有) (有)
無効なフォーム要素 (有)[1] 未サポート (有)[2] 未サポート (有)[1] ?
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 ? (有) ? ? ? ?
無効なフォーム要素 ? 未サポート ? ? ? ?

[1] Only works for <textarea> elements and some <input> element types.

[2] Internet Explorer only triggers the click event on <input> elements of type checkbox or radio when the element is double-clicked.

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mdnwebdocs-bot, irenesmith, mfuji09
最終更新者: mdnwebdocs-bot,