MouseEvent.movementX

movementX は MouseEvent インターフェイスの読み取り専用プロパティで、直前の mousemove イベントとこのイベントのマウスポインターの X 座標の差を示します。このプロパティの値は currentEvent.movementX = currentEvent.screenX - previousEvent.screenX のように計算されます。

警告: ブラウザーは movementX と screenX に 仕様で定義されているものとは異なる単位を使用します。ブラウザーとオペレーティングシステムによって、 movementX の単位は物理ピクセル、論理ピクセル、または CSS ピクセルである場合があります。

値

数値です。

例

この例は movementX と movementY を使用して、マウスの移動量を記録します。

HTML

html

<p id="log">マウスを動かしてください。</p>

JavaScript

js

function logMovement(event) {
  log.insertAdjacentHTML('afterbegin', `移動量: ${event.movementX}, ${event.movementY}<br>`);
  while (log.childNodes.length > 128) log.lastChild.remove()
}

const log = document.getElementById('log');
document.addEventListener('mousemove', logMovement);

結果

仕様書

Specification
Pointer Lock 2.0
# dom-mouseevent-movementx

ブラウザーの互換性

BCD tables only load in the browser

関連情報