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