GlobalEventHandlers.onclick

onclickGlobalEventHandlers ミックスインのプロパティで、所与の要素の click イベントを処理するためのイベントハンドラー (EventHandler) です。

click イベントは、ユーザーが要素をクリックしたときに発生します。 mousedown イベントと mouseup イベントの後に、この順番で発行されます。

: click イベントを使用してアクションを起動するときは、マウスやタッチスクリーンを使用していないユーザーが同じアクションを使用できるように、 keydown イベントにも同じアクションを追加することを検討してください。

構文

target.onclick = functionRef;

functionRef は、関数名または関数式です。 この関数は、MouseEvent オブジェクトを唯一の引数として受け取ります。関数内では、 this はイベントが発行された要素になります。

一度に1つのオブジェクトに割り当てることができる onclick ハンドラは1つだけです。より柔軟性のある EventTarget.addEventListener() メソッドを使用することをお勧めします。

クリックの検出

この例では、要素の上でクリックが行われたときに要素の色を単純に変更します。

HTML

<div id="demo">ここをクリック</div>

JavaScript

document.getElementById('demo').onclick = function changeContent() {

   document.getElementById('demo').innerHTML = "Help me";
   document.getElementById('demo').style = "Color: red";

}

結果

クリックの座標の取得

この例では、最も新しくマウスボタンのクリックが行われた場所の座標を表示します。

HTML

<p>この例のどこかをクリックしてください。</p>
<p id="log"></p>

JavaScript

let log = document.getElementById('log');

document.onclick = inputChange;

function inputChange(e) {
  log.textContent = `位置: (${e.clientX}, ${e.clientY})`;
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
onclick の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onclickChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報