GlobalEventHandlers.onclick

onclick は GlobalEventHandlers ミックスインのプロパティで、指定された要素の click イベントを処理するためのイベントハンドラーです。

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

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

構文

target.onclick = functionRef;

値

functionRef は、関数名または関数式です。この関数は、MouseEvent オブジェクトを唯一の引数として受け取ります。関数内では、 this は onclick が結びつけられたオブジェクトになります (event.currentTarget にも一致します)。

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

例

クリックの検出

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

HTML

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

JavaScript

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

   document.getElementById('demo').textContent = "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})`;
}

結果

仕様書

Specification
HTML Standard # handler-onclick

ブラウザーの互換性

BCD tables only load in the browser