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

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

マウスイベントが発生したとき、screenXプロパティは、画面（スクリーン）の左上を基準としたマウスポインタのX座標（水平方向の位置）をピクセル単位で返します。

screenXとscreenYの基本的な役割

イベントオブジェクトが持つscreenXは水平方向（X座標）、screenYは垂直方向（Y座標）を表します。この2つはブラウザウィンドウやWebページではなく、ユーザーの物理的な画面全体を基準にした座標を返す点が大きな特徴です。

似た用途の座標プロパティと比較すると、違いがより明確になります。

  • screenX / screenY：モニター画面全体を基準とした座標
  • clientX / clientY：ブラウザの表示領域（ビューポート）を基準とした座標
  • pageX / pageY：スクロール量も含めたページ全体を基準とした座標

たとえば、複数のディスプレイ環境では、どちらの画面にブラウザがあっても画面自体を基準とするため、screenXの値は大きく変化します。位置情報の基準を正しく理解して使うことが重要です。

実装例

以下のコードを実行して、JavaScriptでscreenXマウスイベントを使う方法を確認してみましょう。要素をクリックすると、その瞬間のマウスポインタのX座標とY座標が表示されます。

<!DOCTYPE html>
<html>
  <body>
    <p id="demo" onclick="coordsFunc(event)">ここをクリックすると、マウスポインタのX座標（水平方向）とY座標（垂直方向）を取得できます。</p>
    <script>
      function coordsFunc(event) {
        var x_coord = event.screenX;
        var y_coord = event.screenY;
        var xycoords = "X座標 = " + x_coord + "、Y座標 = " + y_coord;
        document.getElementById("demo").textContent = xycoords;
      }
  </script>
 </body>
</html>

主な活用シーン

screenX / screenYは、次のような場面で役立ちます。

  • カスタムコンテキストメニューなど、OSレベルの画面位置を意識したUIの制御
  • マウス操作のトラッキングやユーザー行動分析ツールへの組み込み
  • ポップアップウィンドウを開く際の表示位置の計算（window.open の features 指定など）

なお、ページ内の要素に対して正確に配置したい場合は、screenXではなくclientX / clientYやpageX / pageYを使うのが一般的です。目的に応じて適切な座標プロパティを選択しましょう。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

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

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