"Pointer Lock API：鼠标捕获与安全约束"

概述

Pointer Lock 捕获鼠标并提供相对移动量（`movementX/Y`），适合 FPS/3D 编辑器等视角控制场景。需在用户手势启动并提供退出控件与提示。

示例

const canvas = document.querySelector('canvas')
canvas.addEventListener('click', async () => { await canvas.requestPointerLock() })
document.addEventListener('mousemove', e => {
  if (document.pointerLockElement === canvas) rotateCamera(e.movementX, e.movementY)
})
document.addEventListener('pointerlockchange', () => { /* 更新 UI 状态 */ })

工程建议

• 手势与退出：提供键盘或按钮退出；处理锁定失败与平台差异。
• 安全与隐私：避免在敏感页面启用；明确用途与反馈。
• 与 WebXR/Fullscreen：在沉浸式场景配合使用，并管理状态切换。

参考与验证

• MDN Pointer Lock 文档：https://developer.mozilla.org/docs/Web/API/Pointer_Lock_API
• 规范说明与讨论：https://w3c.github.io/pointerlock/