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

JavaScriptにおけるpageYプロパティの役割とは？マウスポインタのY座標を取得する方法

pageYプロパティとは

マウスイベントが発生したとき、pageYプロパティを使うと、マウスポインタの垂直方向（Y軸）の座標を取得できます。この座標はドキュメント（ページ全体）の左上を基準としたもので、スクロール量も含まれるため、ページをどれだけスクロールしていてもドキュメント上の正確な位置を取得できるのが特徴です。

水平方向の座標を取得する場合はpageXプロパティを使用します。pageXとpageYを組み合わせれば、マウスポインタのドキュメント上の位置を正確に特定できます。

pageYとclientYの違い

似たプロパティにclientYがありますが、両者には以下のような違いがあります。

  • pageY：ドキュメント全体の左上を基準とし、スクロール量を含んだ座標を返す
  • clientY：ブラウザの表示領域（ビューポート）の左上を基準とする座標を返す

スクロールを考慮した絶対的な位置が必要な場合はpageYを、画面上の見た目上の位置が必要な場合はclientYを使い分けるとよいでしょう。

サンプルコード

以下のコードを実行して、JavaScriptでpageYマウスイベントを実装する方法を確認してみましょう。テキストをクリックすると、マウスポインタのX座標（水平方向）とY座標（垂直方向）が表示されます。

<!DOCTYPE html>
<html>
   <body>
       <p onclick="coordsFunc(event)">クリックするとマウスポインタのX座標（水平方向）とY座標（垂直方向）が表示されます。</p>
       <script>
          function coordsFunc(event) {
             var x_coord = event.pageX;
             var y_coord = event.pageY;
             var xycoords = "X座標= " + x_coord + ", Y座標= " + y_coord;
             document.write(xycoords);
          }
       </script>
   </body>
</html>

実行結果の例

例えば、マウスポインタがページの左端から300px、上端から150pxの位置でクリックされた場合、次のように表示されます。

X座標= 300, Y座標= 150

補足：モダンな実装について

サンプルでは簡潔さのためにdocument.write()を使用していますが、このメソッドはページの内容を上書きしてしまうため、実際の開発では推奨されません。実務ではconsole.log()やDOM操作（textContentなど）を使って結果を表示するのが一般的です。

  1. JavaScriptのscreenXマウスイベントとは？役割と使い方を実例で解説

    マウスイベントが発生したとき、screenXプロパティは、画面（スクリーン）の左上を基準としたマウスポインタのX座標（水平方向の位置）をピクセル単位で返します。 screenXとscreenYの基本的な役割 イベントオブジェクトが持つscreenXは水平方向（X座標）、screenYは垂直方向（Y座標）を表します。この2つはブラウザウィンドウやWebページではなく、ユーザーの物理的な画面全体を基準にした座標を返す点が大きな特徴です。 似た用途の座標プロパティと比較すると、違いがより明確になります。 screenX / screenY：モニター画面全体を基準とした座標 clientX / cl

  2. 【JavaScript】キーボードイベントのaltKeyプロパティとは？役割と使い方を解説

    altKeyプロパティとはJavaScriptのaltKeyプロパティは、キーボードイベントが発生した瞬間にAltキー（MacではOptionキー）が押されていたかどうかを判定するためのプロパティです。このプロパティは真偽値（Boolean）を返します。true … イベント発生時にAltキーが押されていたfalse … Altキーは押されていなかった関連する修飾キーのプロパティaltKeyと同じ仕組みで、他の修飾キーの状態も取得できます。組み合わせて使うことで、より柔軟なキーボード操作の判定が可能になります。ctrlKey … Ctrlキーの状態shiftKey … Shiftキーの状態me