プロパティ event.pageX
プロパティ event.pageX は、
マウスカーソルのX軸座標を含んでいます。
座標を決定するためのプロパティには他にも
event.clientX、
event.clientY、
event.pageY があります。
clientX/clientY
と pageX/pageY の違いを見てみましょう。
clientX と clientY の働き：
もしあなたのウィンドウが 1000 × 1000
ピクセルで、マウスが中央にある場合、clientX
と clientY は両方とも 500 になります。もし
その後、カーソルを動かさずにページを水平または垂直に
スクロールしても、値
clientX と clientY は変わりません。これらは文書ではなく
ウィンドウを基準としてカウントされるからです。
pageX と pageY の働き：
もしあなたのウィンドウが 1000 × 1000
ピクセルで、カーソルが中央にある場合、
pageX と pageY は 500 になります。もし
その後、ページを 250
ピクセル下にスクロールすると、pageY は 750 になります。
このように pageX と pageY はスクロールを考慮した
イベントの座標を含んでいます。
構文
event.pageX;
例
ページ上でマウスを動かすと、
ブラウザウィンドウに対するその座標
(pageX と pageY) を出力します：
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
