JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】マウスの座標（X・Y位置）を取得する方法

JavaScriptを使えば、マウスカーソルの現在の座標（X軸・Y軸の位置）を簡単に取得できます。この記事では、mousemoveイベントを利用して、マウスの座標をリアルタイムに画面へ表示する方法をサンプルコード付きで解説します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 25px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>マウスの座標</h1>
<p class="sample"></p>
<h3>画面上でマウスを動かすと、X座標とY座標が表示されます</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    document.body.addEventListener("mousemove", (event) => {
        sampleEle.innerHTML = "X座標: " + event.x + " Y座標: " + event.y;
    });
</script>
</body>
</html>

実行結果

上記のコードを実行し、画面上でマウスを動かすと、マウスカーソルの現在位置が次のように表示されます。

【JavaScript】マウスの座標（X・Y位置）を取得する方法

コードの解説

1. 表示用要素の取得

document.querySelector(".sample") によって、座標を表示するための <p class="sample"> 要素を取得しています。

2. mousemoveイベントの登録

document.body.addEventListener("mousemove", ...) で、ページ全体（body要素）に対して mousemove イベントのリスナーを登録します。このイベントは、ユーザーがマウスを動かすたびに発生します。

3. 座標の取得と表示

イベントオブジェクトの event.x および event.y プロパティから、マウスカーソルのX座標・Y座標（ピクセル単位）を取得し、innerHTML を使って画面に反映しています。マウスが動くたびにイベントが発火するため、座標は常にリアルタイムで更新されます。

補足：clientX / clientY の使い分け

event.x / event.y は、event.clientX / event.clientY のエイリアス（別名）です。実務ではより一般的な後者を使うことが推奨されています。これらはブラウザの表示領域（ビューポート）の左上を原点とした座標を返します。また、用途に応じて pageX / pageY（ページ全体を基準とした座標）や screenX / screenY（スクリーン上の座標）も使い分けると便利です。

  1. JavaScriptでHTMLのH1要素のテキストを変数に取得する方法

    HTML内の <h1> 要素のテキストをJavaScriptの変数に格納したい場合は、document.getElementById() と innerHTML を組み合わせて使用するのが基本です。 H1の値を取得する基本的な方法 document.getElementById(id名).innerHTML と記述することで、指定したIDを持つ要素の内容（テキスト）を取得できます。 例として、次のようなH1見出しがHTMLにあると仮定しましょう。 <h1 id=demo>これはJavaScriptのデモプログラムです……</h1> このH1の値を取得するには

  2. SeleniumでJavaScriptコードの戻り値を取得する方法

    Selenium WebDriverを使用すると、JavaScriptコードの戻り値を取得することができます。SeleniumはexecuteScriptメソッドを利用してJavaScriptコマンドを実行でき、実行したいJavaScriptコマンドはこのメソッドの引数として渡します。 JavaScriptコードから値を返す際にはreturnキーワードを使用します。また、JavaScriptを操作するためには、import org.openqa.selenium.JavascriptExecutorというインポート文を追加する必要がある点にも注意してください。 構文 JavascriptEx