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

--- title: "Pointer Lock API：鼠标捕获与安全约束" keywords: - Pointer Lock - requestPointerLock - movementX - movementY - 游戏与3D description: "说明 Pointer Lock 的鼠标捕获与相对移动事件，用于游戏与 3D 场景的视角控制，强调权限、手势与退出策略，提供示例与参考。" categories: - 文章资讯 - 技术教程 --- 概述 Pointer Lock 捕获鼠标并提供相对移动量（`movementX/Y`），适合 FPS/3D 编辑器等视角控制场景。需在用户手势启动并提供退出控件与提示。 示例 ```js 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/