MouseEvent pageX属性

DOM イベント MouseEvent

定義と使用方法

マウスイベントがトリガーされたとき、pageX属性はマウスカーソルの水平座標（ドキュメント相対）を返します。

ドキュメントはウェブページです。

ヒント：マウスカーソルの垂直座標（ドキュメント相対）を取得するには、 pageY属性.

注記：この属性は読み取り専用です。

注記：この属性は非標準的ですが、ほとんどの主要ブラウザに適しています。

例

例1

要素上でマウスボタンをクリックしたときにマウスカーソルの座標を出力します：

var x = event.pageX;     // 水平座標を取得
var y = event.pageY;     // 垂直座標を取得
var coor = "X coords: " + x + ", Y coords: " + y;

実際に試してみてください

例2

要素上でのマウスカーソルの移動時の座標を出力します：

var x = event.pageX;
var y = event.pageY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

実際に試してみてください

例3

pageXとpageY、screenXとscreenYの間の差のデモ：

var pX = event.screenX;
var cX = event.pageX;
var pY = event.screenY;
var cY = event.pageY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "screen - X: " + cX + ", Y coords: " + cY;

実際に試してみてください

文法

event.pageX

技術的詳細

戻り値： 数値、マウスカーソルの水平座標をピクセル単位で示します。
DOMバージョン： なし。

ブラウザのサポート

属性 Chrome IE Firefox Safari Opera
pageX サポート 12.0 サポート サポート サポート

関連ページ

HTML DOM リファレンスマニュアル：MouseEvent pageY 属性

HTML DOM リファレンスマニュアル：MouseEvent clientX 属性

HTML DOM リファレンスマニュアル：MouseEvent clientY 属性

HTML DOM リファレンスマニュアル：MouseEvent screenX 属性

HTML DOM リファレンスマニュアル：MouseEvent screenY 属性

DOM イベント MouseEvent