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 July 2015.

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報