Я разрабатывал функцию, основанную на движении мыши и использующую для работы movementX.Это прекрасно работает, но я заметил, что время от времени у него странное поведение.Когда я углубился в него, я обнаружил, что, по-видимому, проблема со свойством movementX.
MDN состояний :
ДвижениеX прочитано-only свойство интерфейса MouseEvent обеспечивает различие в координате X указателя мыши между данным событием и предыдущим событием mousemove.Другими словами, значение свойства вычисляется так: currentEvent.movementX = currentEvent.screenX - previousEvent.screenX.
Но это не всегда так.Если вы быстро переместите указатель из-за пределов браузера, то по какой-то причине значение может быть равно или даже больше screenX.Поскольку я не могу воспроизвести это в JSFiddle, я использовал этот простой документ и открыл его в Chrome:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
document.addEventListener('mousemove', (event) => {
console.log('movementX:', event.movementX, 'clientX:', event.clientX, 'innerWidth:', window.innerWidth)
})
</script>
</body>
</html>
И вот изображение, описывающее проблему:
Как видите, значение movementX увеличивается до 914.Согласно описанию свойства в MDN, оно должно возвращать разницу между текущим значением screenX, 849 и предыдущим, которое также составляет 849.Вместо свойства, равного 0, вместо него 914.
Почему это происходит?
Браузер: Chrome, версия 72.0.3626.109 (Официальная сборка) (64-битная версия)