MouseEvent pageY属性

DOM イベント MouseEvent

定義と使用法

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

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

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

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

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

例

例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

clientX と clientY そして screenX と screenY の違いを示すデモンストレーション：

var pX = event.pageX;
var cX = event.clientX;
var pY = event.pageY;
var cY = event.clientY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "client - X: " + cX + ", Y coords: " + cY;

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

構文

event.pageY

技術的な詳細

返り値： 数値で、ピクセル単位の垂直座標を示します。
DOMバージョン： なし。

ブラウザのサポート

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

関連ページ

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

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

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

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

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

DOM イベント MouseEvent