event.pageY プロパティ

プロパティ event.pageY は、 Y軸におけるマウスカーソルの座標を保持します。 座標を決定するためのプロパティには、 event.clientX、 event.clientY、 event.pageX もあります。 clientX/clientY と pageX/pageY の違いを見てみましょう。

clientX と clientY の仕組み： もし 1000 × 1000 ピクセルのウィンドウがあり、 マウスが中央にある場合、clientX と clientY は 両方とも 500 になります。その後、 カーソルを動かさずにページを水平または垂直に スクロールしても、値は変わりません。これらはドキュメントではなく ウィンドウに対して相対的に測定されるためです。

pageX と pageY の仕組み： もし 1000 × 1000 ピクセルのウィンドウがあり、 カーソルが中央にある場合、 pageX と pageY は 500 になります。 その後、ページを 250 ピクセル下にスクロールすると、 pageY は 750 になります。 このように、pageX と pageY はスクロールを考慮した イベントの座標を保持します。

構文

javascriptevent.pageY;

例

ページ上でマウスを移動する際に、 ブラウザウィンドウに対する座標 (pageX と pageY) を表示します：

html<div id="elem">0 : 0</div>

javascriptlet elem = document.getElementById('elem');

document.addEventListener('mousemove', function(event) {
  elem.innerHTML = event.pageX + ' : ' + event.pageY;
});

Результат:

関連項目