MouseEventpageXプロパティ_
例
要素上でマウスボタンがクリックされたときのマウスポインタの座標を出力します。
var x = event.pageX; // Get the horizontal coordinate
var y = event.pageY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
pageXプロパティは、マウスイベントがトリガーされたときに、マウスポインタの水平座標(ドキュメントによる)を返します。
ドキュメントはWebページです。
ヒント:マウスポインタの垂直座標(ドキュメントによる)を取得するには、pageYプロパティを使用します。
注:このプロパティは読み取り専用です。
注:このプロパティは非標準ですが、ほとんどの主要なブラウザーで機能します。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
pageX | Yes | 12.0 | Yes | Yes | Yes |
構文
event.pageX
技術的な詳細
戻り値: | マウスポインタの水平座標をピクセル単位で表す数値。 |
---|---|
DOMバージョン: | なし |
その他の例
例
マウスポインタが要素上を移動している間、マウスポインタの座標を出力します。
var x = event.pageX;
var y = event.pageY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
例
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;
関連ページ
HTML DOMリファレンス:MouseEventpageYプロパティ
HTML DOMリファレンス:MouseEventclientXプロパティ
HTML DOMリファレンス:MouseEventclientYプロパティ
HTML DOMリファレンス:MouseEventscreenXプロパティ
HTML DOMリファレンス:MouseEventscreenYプロパティ