このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
MouseEvent: movementX プロパティ
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
movementX は MouseEvent インターフェイスの読み取り専用プロパティで、直前の mousemove イベントとこのイベントのマウスポインターの X 座標の差を示します。このプロパティの値は currentEvent.movementX = currentEvent.screenX - previousEvent.screenX のように計算されます。
警告:
ブラウザーは movementX と screenX に 仕様で定義されているものとは異なる単位を使用します。ブラウザーとオペレーティングシステムによって、 movementX の単位は物理ピクセルであったり、論理ピクセルであったり、 CSS ピクセルであったりします。
値
数値です。 mousemove 以外の MouseEvent では常に 0 です。
例
この例は 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);
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| Pointer Lock 2.0 # dom-mouseevent-movementx |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。