イベントプロパティ 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 はスクロールを考慮した イベント座標を含んでいます。

構文

javascriptevent.clientY;

例

ページ上でマウスを動かす際に、 ブラウザウィンドウに対する相対座標 (clientX と clientY) を出力します:

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

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

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

Результат:

関連項目