Chrome 和 Edge 中的 `movementX` 和 `movementY` 值出现意外跳转

Question

我在 Chrome 和 Edge 浏览器（最新版本）中遇到鼠标事件处理的异常问题，但在 Firefox 中没有遇到该问题。该问题涉及鼠标移动期间

movementX

和

movementY

的值意外跳跃。

背景： 我正在开发一个需要精确的鼠标移动跟踪的网络应用程序。我使用

requestPointerLock()

锁定鼠标指针以获得身临其境的体验。该应用程序严重依赖

movementX

的

movementY

和

MouseEvent

属性来跟踪鼠标的移动。

问题： 当我缓慢移动鼠标时，

movementX

和

movementY

的值偶尔会跳到一个很大的数字（例如，从 1 左右到 627），这表明鼠标位置发生了突然的、不切实际的变化。此问题似乎仅在 Chrome 和 Edge 中出现，但在 Firefox 中不会出现。

代码示例：

// Sample code demonstrating how I handle mouse events
document.addEventListener("mousemove", (event) => {
    let movementX = event.movementX;
    let movementY = event.movementY;

    // Process the movement
    // ...
});

尝试解决：

• 我尝试实施移动平均滤波器来平滑这些值，但问题仍然存在。
• 考虑到特定浏览器问题的可能性，我在最新版本的 Chrome 和 Edge 以及 Firefox 上进行了测试，没有出现该问题。

问题： 有其他人在 Chrome 和 Edge 中遇到过这种行为吗？这些浏览器如何处理

movementX

和

movementY

中的

MouseEvent

是否存在任何已知问题，尤其是当指针被锁定时？任何有关如何处理鼠标移动值的意外跳跃的见解或建议将不胜感激。

Answer 1

长期以来，这一直是基于 Chromium 的浏览器中的一个问题，并且与高轮询率的鼠标有关，但他们最终在 Chromium 88+ 中提供了解决方法。请参阅我的答案的底部：https://stackoverflow.com/a/69672260/8916663