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>
JavaScript 初心者におすすめの学習書籍
手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
→ いちばんやさしい JavaScript の教本
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→ 確かな力が身につくJavaScript「超」入門
まとめ
x / y：簡易的なマウス座標clientX / clientY：表示領域内の座標pageX / pageY：ページ全体の座標（スクロール含む）screenX / screenY：画面全体の座標- 用途に応じて使い分けることで正確な位置取得が可能
