MouseEvent: clientX プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
clientX は MouseEvent の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションのビューポートにおける水平座標を定義します（ページにおける座標ではありません）。
例えば、ビューポートの左端をクリックすると、そのページが水平方向にスクロールしているかどうかにかかわらず、常に clientX の値が 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}`; } 結果
仕様書
| Specification |
|---|
| UI Events # dom-mouseevent-clientx |
ブラウザーの互換性
Loading…