如何用 JavaScript Pointer Lock API 锁定鼠标——关键步骤与实战技巧
使用 Pointer Lock API 锁定鼠标并不复杂，但有几个关键要点必须严格遵循。首先，调用 element.requestPointerLock() 必须在用户明确的手势事件中执行——例如点击或按键，而且目标元素必须可见且可聚焦。浏览器不会允许悄无声息地夺取鼠标控制权，必须由用户主动“授权”。
说得再直白一点：你无法在页面刚加载时或定时器里直接调用 requestPointerLock，浏览器会拒绝。只有通过 click、mousedown 或 keydown 这类用户交互事件链，才能成功。以下是几个实战经验：
确保在用户交互事件中发起鼠标锁定
- 给一个按钮绑定点击事件，在点击后调用
document.body.requestPointerLock()，这是最经典的做法。 - 千万不要在
setTimeout、fetch.then等异步回调中直接调用——除非这个回调本身被用户点击事件链“串联”起来，否则浏览器不认可。 - 如果使用 Canvas 开发游戏，直接在 Canvas 上监听
click事件再发起锁定，最为稳妥。
监听锁定状态并处理错误
锁定并非调用后立即生效，需要监听两个事件来确认结果。
document.addEventListener('pointerlockchange', () => { if (document.pointerLockElement) { /* 已锁定 */ } })—— 锁定状态变化时触发。document.addEventListener('pointerlockerror', () => console.error('锁定失败'))—— 捕获锁定失败的原因。- 常见的失败原因包括：不是用户手势触发、元素被隐藏或不可见、页面未聚焦、或者其他页面已抢占锁。这些坑踩过一次就会记住。
利用 movementX/Y 获取鼠标位移
锁定后，鼠标指针消失，常规的 mousemove 事件中的 clientX/clientY 不再更新，取而代之的是 movementX 和 movementY，它们记录鼠标的像素级位移。
- 直接监听
document.addEventListener('mousemove', e => { console.log(e.movementX, e.movementY) })，这些数值不受屏幕边界限制，非常适合实现视角旋转或平滑指针移动。 - 注意：部分浏览器（如某些版本的 Safari）可能需要开启实验性功能才支持
movement属性，开发时建议做兼容性测试。
安全退出鼠标锁定
用户按 ESC 键可以自动退出锁定，代码中也可以主动调用 document.exitPointerLock()。
- 建议在界面上提供一个明确的“退出锁定”按钮，绑定
document.exitPointerLock()，方便用户手动离开。 - 监听
pointerlockchange事件可以判断是否已退出——当document.pointerLockElement === null时，即为退出状态。 - 退出后鼠标光标恢复正常，
movementX/Y不再更新。
说起来并不复杂，但有一个细节容易被忽略：每次发起锁定前，先检查一下 document.pointerLockElement 是否为 null，防止重复请求导致报错。同时确保目标元素（通常是 document.body 或 ）已经渲染完成，并且没有被 display: none 等样式隐藏——否则锁定也会失败。
