MouseEvent: clientY プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
clientY は MouseEvent の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションのビューポートにおける垂直座標を定義します（ページにおける座標ではありません）。
例えば、ビューポートの上端をクリックすると、そのページが垂直方向にスクロールしているかどうかにかかわらず、常に clientY の値が 0 のマウスイベントが発生します。
値
double の浮動小数点値です。
例
この例では、 mousemove イベントが発生するたびに、マウスの座標を表示します。
HTML
html
<p>マウスを動かして位置を確認してください。</p>
<p id="screen-log"></p>
JavaScript
js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);
function logKey(e) {
screenLog.innerText = `
Screen X/Y: ${e.screenX}, ${e.screenY}
Client X/Y: ${e.clientX}, ${e.clientY}`;
}
結果
仕様書
| 仕様書 |
|---|
| Pointer Events # dom-mouseevent-clienty |