Chrome与Edge中movementX和movementY值异常跳变问题求助

问题背景 #

我正在开发一款需要精准鼠标移动追踪的Web应用，使用requestPointerLock()锁定鼠标指针以实现沉浸式体验，核心依赖MouseEvent的movementX和movementY属性追踪鼠标移动。

问题现象 #

在Chrome和Edge最新版本中，缓慢移动鼠标时，movementX和movementY值偶尔会出现大幅跳变（例如从约1跳到627），但该问题在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（基于Chromium内核）在指针锁定模式下处理movementX/movementY确实存在已知的异常跳变问题，不少开发者在Chromium官方bug平台反馈过类似情况。这类跳变通常源于浏览器在指针锁定状态下，偶尔会累积未处理的鼠标移动事件，或是在窗口焦点切换、系统级鼠标干扰时出现数值溢出。

解决思路与建议

1. 阈值过滤异常值
   正常缓慢移动时，movementX/movementY的绝对值通常很小，可直接过滤超出合理范围的数值：

document.addEventListener("mousemove", (event) => {
    const MAX_ALLOWED_MOVEMENT = 20; // 根据场景调整
    let movementX = Math.abs(event.movementX) > MAX_ALLOWED_MOVEMENT ? 0 : event.movementX;
    let movementY = Math.abs(event.movementY) > MAX_ALLOWED_MOVEMENT ? 0 : event.movementY;

    // 处理移动逻辑
    // ...
});

2. 基于时间间隔的速度校验
   记录上一次移动的时间戳和位移，计算单位时间内的移动速度，过滤速度异常的数值：

let lastMoveTime = Date.now();

document.addEventListener("mousemove", (event) => {
    const currentTime = Date.now();
    const timeDiff = currentTime - lastMoveTime;
    const speedX = Math.abs(event.movementX) / (timeDiff || 1);
    const speedY = Math.abs(event.movementY) / (timeDiff || 1);
    const MAX_ALLOWED_SPEED = 10; // 像素/毫秒，按需调整

    let movementX = speedX > MAX_ALLOWED_SPEED ? 0 : event.movementX;
    let movementY = speedY > MAX_ALLOWED_SPEED ? 0 : event.movementY;

    lastMoveTime = currentTime;
    // 处理移动逻辑
    // ...
});

3. 重置指针锁定状态的位移记录
   在指针锁定状态切换时（pointerlockchange事件），重置相关记录，避免状态切换时的累积位移导致跳变：

document.addEventListener("pointerlockchange", () => {
    lastMoveTime = Date.now();
    // 如有其他位移记录变量也一并重置
});

4. 切换到PointerEvent接口
   尝试使用更现代的PointerEvent接口，它的movementX/movementY在Chromium下表现更稳定，兼容性覆盖主流现代浏览器：

document.addEventListener("pointermove", (event) => {
    let movementX = event.movementX;
    let movementY = event.movementY;

    // 可叠加上述过滤逻辑
    // ...
});

内容的提问来源于stack exchange，提问作者zgccrui