カーソルの座標を表示する JavaScriptの置き場所 addEventListenerの使い方

スポンサーリンク

ここではのコードを紹介します。

詳しい説明はございません。コピペして使用してください。

スポンサーリンク

マウスカーソルの座標を表示するJavaScriptのコード

次のように表示させます。ブラウザ表示画面左上から見た座標です。

X座標 ここに表示されます

Y座標 ここに表示されます

document.addEventListener("mousemove", function(event) {
  document.getElementById("resultx").innerHTML = event.clientX;
  document.getElementById("resulty").innerHTML = event.clientY;
});
X座標 <span id="resultx" style="padding: 10px; border: 1px solid #444444;">ここに表示されます</span>
Y座標 <span id="resulty" style="padding: 10px; border: 1px solid #444444;">ここに表示されます</span>
説明 event.clientXevent.clientYでマウスカーソルのx座標とy座標を取得します。

こちらの記事も参考に