JavaScript 浏览器 Pointer Lock API 锁定鼠标如何实现

要使用 Pointer Lock API 锁定鼠标，必须在用户手势（如点击）触发的事件中调用 element.requestPointerLock()，目标元素需可见可聚焦；需监听 pointerlockchange 和 pointerlockerror 事件处理状态与错误；锁定后通过 mousemove 的 movementX/Y 获取位移；ESC 或 document.exitPointerLock() 可退出。

要使用 pointer lock api 锁定鼠标，核心是调用 element.requestpointerlock()，但必须在用户手势（如点击、按键）触发的事件中调用，且目标元素需在 dom 中可见并可聚焦。

确保在用户交互中发起锁定

浏览器强制要求 pointer lock 必须由显式用户操作触发，比如 click、mousedown 或 keydown。直接在页面加载或定时器里调用会失败。

• 给一个按钮绑定点击事件，点击后调用 document.body.requestPointerLock()
• 避免在异步回调（如 setTimeout、fetch.then）中调用，除非该回调本身由用户事件链触发
• 如果使用 canvas 做游戏，推荐监听 canvas 的 click 事件再锁定

监听锁定状态与错误处理

锁定不是立即生效，需监听 pointerlockchange 和 pointerlockerror 事件来确认结果。

• document.addEventListener('pointerlockchange', () => { if (document.pointerLockElement) { /* 已锁定 */ } })
• document.addEventListener('pointerlockerror', () => console.error('锁定失败'))
• 常见失败原因：非用户手势触发、元素不可见、页面未聚焦、已被其他页面锁定

获取和使用鼠标移动偏移量

锁定后，鼠标不再触发常规 mousemove 的 clientX/clientY，而是通过 movementX/movementY 获取相对位移。

• 监听 document.addEventListener('mousemove', e => { console.log(e.movementX, e.movementY) })
• 这些值在每次事件中表示自上一次事件以来鼠标的像素级位移，不受屏幕边界限制
• 注意：部分浏览器（如 Safari）可能需启用实验性功能或特定 UA 才完全支持 movement 属性

安全退出锁定

用户可通过 ESC 键自动退出，也可主动调用 document.exitPointerLock()。

立即学习“Java免费学习笔记（深入）”；

• 建议在应用逻辑中提供明确的“退出锁定”按钮，并绑定 document.exitPointerLock()
• 监听 pointerlockchange 可判断是否已退出（document.pointerLockElement === null）
• 退出后，鼠标光标恢复显示，movementX/Y 停止更新

不复杂但容易忽略：每次锁定前检查 document.pointerLockElement 是否为 null，避免重复请求；同时确保目标元素（通常是 document.body 或 <canvas>）已渲染完成且未被 display: none 隐藏。