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 の定義
現行の標準

ブラウザーの互換性

BCD tables only load in the browser

関連情報