MouseEvent: свойство movementX

Базовая реализация Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Чтение-только свойство movementX интерфейса MouseEvent показывает разницу в координате X курсора мыши между текущим событием и предыдущим событием mousemove. Другими словами, значение свойства вычисляется так: currentEvent.movementX = currentEvent.screenX - previousEvent.screenX.

Предупреждение: Браузеры используют разные единицы для movementX и screenX, чем определено спецификацией. В зависимости от браузера и операционной системы, единицы movementX могут быть физическими пикселями, логическими пикселями или пикселями CSS. Возможно, стоит избегать свойств смещения и вместо этого вычислять разницу между текущими значениями client (screenX, screenY) и предыдущими значениями client.

Значение

Число. Всегда равно нулю для любого события MouseEvent, кроме mousemove.

Примеры

В этом примере отображается величина смещения мыши с помощью movementX и movementY.

HTML

<p id="log">Move your mouse around.</p>

JavaScript

function logMovement(event) {
  log.insertAdjacentHTML(
    "afterbegin",
    `movement: ${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

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`movementX`	3722–37	13	411–41	2415–24	96–8	3725–37	414–41	2414–24	86–8	3.01.0–3.0	374.4–37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX