JavaScriptのマウス座標プロパティまとめ｜x・y・clientX・pageX・screenXの違いを解説
JavaScript のイベントオブジェクトには、マウスの位置を取得するための
x / y / clientX / clientY / pageX / pageY / screenX / screenY
といったプロパティが用意されています。
これらを使うことで、ページ上・表示領域上・画面上のどこでイベントが発生したかを正確に取得できます。
x / y（マウス座標）
event.x と event.y は、マウスの位置を簡易的に取得するプロパティです。
ブラウザによっては clientX / clientY と同じ値を返します。
使用例：マウスのX座標・Y座標を表示
alert(event.x + “,” + event.y);
clientX / clientY（表示領域内の座標）
clientX と clientY は、
ブラウザの表示領域（ビューポート）の左上からの相対座標 を返します。
使用例：表示領域内のX座標を表示
alert(event.clientX);
使用例：表示領域内のY座標を変数に代入
cY = event.clientY;
pageX / pageY（ページ全体の座標）
pageX と pageY は、
ページ全体の左上からの相対座標 を返します。
スクロール量も含めた位置を取得できるため、ページが長い場合に便利です。
使用例：フォームに座標を代入
document.eForm.px.value = event.pageX;
document.eForm.py.value = event.pageY;
document.eForm.py.value = event.pageY;
screenX / screenY（画面全体の座標）
screenX と screenY は、
ディスプレイ画面の左上からの相対座標 を返します。
使用例：画面上のY座標が250px以上なら処理を実行
if (event.screenY >= 250) myFunc();
マウス座標プロパティの違いまとめ
| プロパティ | 基準位置 |
|---|---|
| x / y | ブラウザによって clientX / clientY と同じ |
| clientX / clientY | 表示領域（ビューポート）の左上 |
| pageX / pageY | ページ全体の左上（スクロール量を含む） |
| screenX / screenY | ディスプレイ画面の左上 |
実際のサンプル（座標をリアルタイム表示）
<div onclick=”console.log(‘client:’, event.clientX, event.clientY, ‘page:’, event.pageX, event.pageY)”>
クリックして座標を確認
</div>
クリックして座標を確認
</div>
まとめ
x / y：簡易的なマウス座標clientX / clientY：表示領域内の座標pageX / pageY：ページ全体の座標（スクロール含む）screenX / screenY：画面全体の座標- 用途に応じて使い分けることで正確な位置取得が可能
