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

JavaScriptのpageXマウスイベントとは？役割と使い方をわかりやすく解説

pageXプロパティの役割

マウスイベントが発生した際に、pageXプロパティを使用すると、マウスポインタの水平方向（X軸）の座標を取得できます。この座標は、ドキュメント（ページ全体）の左端を基準とした値であり、ページをスクロールしても変わりません。

なお、垂直方向（Y軸）の座標を取得する場合は、同じくMouseEventオブジェクトが持つpageYプロパティを使用します。両者を組み合わせることで、クリックされた位置を正確に把握できます。

関連する座標系との違い

マウスイベントの座標取得には、pageX以外にもいくつかのプロパティがあります。

  • clientX / clientY： ブラウザの表示領域（ビューポート）の左上を基準とした座標
  • screenX / screenY： ディスプレイ（画面）の左上を基準とした座標
  • pageX / pageY： ドキュメント全体の左上を基準とした座標（スクロール量を含む）

サンプルコード

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

<!DOCTYPE html>
<html>
   <body>
      <p onclick = "coordsFunc(event)">
         Click here to get the x (horizontal) and y (vertical)
         coordinates of the mouse pointer.  
      </p>
      <script>
         function coordsFunc(event) {
            var x_coord = event.pageX;
            var y_coord = event.pageY;
            var xycoords = "X coords= " + x_coord + ", Y coords= " + y_coord;
            document.write(xycoords);
         }
      </script>
   </body>
</html>

コードのポイント

  • p要素のonclick属性でクリックイベントを検知し、イベントオブジェクト（event）を関数に渡しています。
  • 関数内ではevent.pageXとevent.pageYでそれぞれX・Y座標を取得し、文字列として画面に出力しています。

このように、pageXプロパティを活用すれば、ツールチップの表示位置の制御やドラッグ＆ドロップ機能の実装など、マウスカーソルの位置に連動したインタラクティブな処理を簡単に作成できます。

  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