JavaScript | マウスカーソルのある場所の座標を取得する方法
JavaScriptでマウスカーソルのある場所の座標を取得する方法とサンプルコードを紹介しています。
マウスカーソルのある場所の座標を取得するサンプルコード
マウスカーソルの座標はイベントプロパティの clientX と clientY に格納されています。
リアルタイムにマウスカーソルの座標を取得する場合は、addEventListener()で mousemove を指定してマウスカーソルが移動している際に実行するイベントを実装します。
例えば、以下のサンプルコードでは、コンソールログにリアルタイムでマウス座標を出力しています。
document.addEventListener("mousemove", function (e) {
console.log("X: " + e.clientX + " Y: " + e.clientY)
})同じ方法で特定の要素内でのみの実装にしたり、マウスクリック時の実装にしたりする事ができます。
element.addEventListener("mousemove", function (e) {
console.log("X: " + e.clientX + " Y: " + e.clientY)
})