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

JavaScriptでマウスカーソルの座標を取得する方法【clientX・clientYの使い方】

JavaScriptでマウスカーソルの座標を取得するには、イベントオブジェクトが持つ event.clientX と event.clientY プロパティを使用します。clientX はブラウザの表示領域（ビューポート）左端からの横方向の座標を、clientY は上端からの縦方向の座標を、それぞれピクセル単位で返します。

基本的な使い方

以下は、要素の上でマウスボタンを押したときに、その位置のカーソル座標を画面に表示するシンプルなサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>カーソル座標の取得</title>
    <script>
      function coordinatesFunc(event) {
        document.getElementById("result").innerHTML =
          "Coordinate(X) = " + event.clientX +
          "<br>Coordinate(Y) = " + event.clientY;
      }
    </script>
  </head>

  <body>
    <div onmousedown="coordinatesFunc(event)" style="padding:20px; background:#eee; cursor:pointer;">
      ここをクリックするとカーソルの座標を取得できます
    </div>
    <p id="result"></p>
  </body>
</html>

コードの解説

  • onmousedownイベント： div要素の上でマウスボタンが押されると、coordinatesFunc 関数が呼び出されます。
  • event.clientX / event.clientY： クリックされた瞬間のカーソルのX座標とY座標を取得します。
  • 結果の表示： 取得した座標は id="result" の要素に挿入されて表示されます。

clientX・clientYとpageX・pageYの違い

似たプロパティとして pageX / pageY があります。両者の違いは次のとおりです。

  • clientX / clientY： ブラウザの表示領域（ビューポート）の左上を基準とした座標。ページをスクロールしても基準位置は変わりません。
  • pageX / pageY： ドキュメント全体の左上を基準とした座標。スクロール量が加算されるため、ページ内での絶対的な位置を取得できます。

画面上の見えている範囲を基準にしたい場合は clientX / clientY を、ドキュメント全体の中での位置が必要な場合は pageX / pageY を使うとよいでしょう。

  1. 【初心者向け】JavaScriptで現在のURLを取得する方法をわかりやすく解説

    JavaScriptで現在表示しているページのURLを取得するには、window.location.hrefプロパティを使用します。このプロパティは、プロトコル・ドメイン・パス・クエリ文字列を含む完全なURLを文字列として返します。 実装例：現在のURLを取得して表示する 以下のコードは、ページのURLを取得し、画面上に表示するシンプルなサンプルです。 <!DOCTYPE html> <html>    <body>       <h3>現在のURLを取得</h3>   &n

  2. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト