マウスカーソルの相対座標を取得

マウスカーソルの相対座標を取得するには、イベントオブジェクトのevent.clientXプロパティまたはevent.clientYプロパティを使用します。
水平(左右)の座標はevent.clientXプロパティ、垂直(上下)の座標はevent.clientYプロパティでそれぞれ取得できます。

得られる座標はページの表示領域内での座標であって、ページ全体の座標ではありません。
つまり、スクロールが発生しページの表示領域外は座標に含まれません。
表示領域外(スクロール範囲を含む)も取得するには、マウスカーソルの絶対座標を取得ページを参照してください。

デモ

-

構文

サンプルコード

JavaScript

サンプルコードではclickイベントで取得していますが、mousemoveイベントなどマウス操作に関するイベントで取得でき、それ以外のイベントでは取得することができません。(例えばページ読み込み時など)

JavaScript逆引きリファレンス一覧へ戻る