Pointer Lock API movementX值在开发者控制台开启时异常降低问题

更新说明 #

• 打开控制台并进行性能分析时，movementX值恢复正常；停止性能分析但保持控制台开启后，数值再次降低。
• 有相关讨论提到movementX/movementY在不同设备上可能存在数值不一致的问题。
• 可通过示例页面测试：开启/关闭控制台时左右移动鼠标，观察movementX值的差异，开启控制台时数值明显偏小。

function app(el) {
  bind_pointer(el)({
    onMove(xy) {
      console.log(xy)
    }
  })
  console.log('ok')
}

app(document.getElementById('app')!)

function bind_pointer($element: HTMLElement) {
  return (hooks: PointerHooks) => {

    let { onPointerUnlock, onPointerLock, onClick, onDown, onUp } = hooks

    const onMove = (e: MouseEvent) => hooks.onMove([e.movementX, e.movementY])

    const test_pointer_lock = (on_pointer_lock: () => void, on_no_lock?: () => void) => {
      return () => {
        if (document.pointerLockElement === $element) {
          on_pointer_lock()
        } else {
          on_no_lock?.()
        }
      }
    } 

    let just_exited = false
    document.addEventListener('pointerlockchange', test_pointer_lock(() => {
      onPointerLock()
      document.addEventListener('mousemove', onMove, false)
    }, () => {
      onPointerUnlock()
      document.removeEventListener('mousemove', onMove, false)
      just_exited = true
      setTimeout(() => {
        just_exited = false
      }, 1600)
    }))

    $element.addEventListener('click', test_pointer_lock(onClick, () => {
      if (!just_exited) {
        $element.requestPointerLock()
      }
    }))

    $element.addEventListener('mousedown', test_pointer_lock(onDown))
    $element.addEventListener('mouseup', test_pointer_lock(onUp))
  }
}

由于Pointer Lock API无法在示例环境中正常运行，无法提供可直接复现的案例。

实际运行环境中的表现：

• 开发者控制台开启时，movementX值最大仅为20左右；
• 控制台关闭时，该值可达到100左右。

目前无法明确该现象的产生原因，建议将输出日志显示在网页上，以便在控制台关闭时也能查看数据。

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