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

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

JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。

この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。

screenYの主な特徴

  • マウスポインタの垂直座標（Y座標）をピクセル単位で返す
  • 画面の左上を基準点（0, 0）とする
  • clientY とは異なり、ブラウザの表示領域ではなく画面全体が基準になる

実装例

以下のコードを実行すると、クリックした瞬間のマウスポインタのX座標（水平方向）とY座標（垂直方向）を取得して表示できます。screenYイベントの使い方を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <p 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.write(xycoords);
         }
      </script>
   </body>
</html>

このサンプルでは、段落要素をクリックすると coordsFunc 関数が呼び出され、イベントオブジェクトから event.screenX と event.screenY の値をそれぞれ取得します。取得した座標は文字列として連結され、画面に出力されます。

マウスポインタの正確な位置情報が必要なツールチップの表示やドラッグ＆ドロップ機能などを実装する際に、screenY プロパティは非常に役立ちます。

  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