指针锁定 API 演示 - 鼠标消失与无限移动

指针锁定 API 是一个 Web 浏览器接口，允许网页应用程序隐藏鼠标光标并获取原始鼠标移动数据（movementX / movementY）。当指针被锁定后，鼠标的物理移动不再受屏幕边界限制，可以实现"无限移动"——这对第一人称游戏、3D 场景导航、虚拟现实体验等场景至关重要。该 API 通过 Element.requestPointerLock() 方法激活。

1. 点击上方深色追踪区域（或点击"锁定鼠标"按钮）激活指针锁定。
2. 鼠标光标会消失，移动鼠标即可看到发光准星在区域内跟随移动。
3. 准星到达区域边缘时会从对面重新出现，展示"无限移动"特性。
4. 尝试用准星瞄准并追踪红色目标点，接近即可命中得分。
5. 按 ESC 键或点击"解锁鼠标"按钮退出锁定模式。

movementX 和 movementY 是鼠标事件对象上的两个属性，仅在指针锁定状态下可用。它们表示自上一次鼠标事件以来鼠标在水平和垂直方向上的原始移动增量（单位：像素）。与 clientX/clientY 不同，它们不受屏幕边界限制，始终反映鼠标的实际物理移动。这使得开发者可以实现无边界限制的鼠标交互，例如 FPS 游戏中的视角旋转。

普通鼠标事件的 clientX/clientY 在鼠标到达屏幕边缘时会停止变化，这严重限制了需要连续鼠标输入的应用（如游戏中的持续转向）。指针锁定 API 解决了这个痛点：
· 鼠标光标完全隐藏，消除视觉干扰
· movementX/Y 提供无边界增量数据
· 浏览器可以重新定位鼠标到屏幕中心（可选行为）
· 适用于需要相对移动而非绝对位置的场景

桌面端：Chrome、Firefox、Edge、Opera 均完整支持指针锁定 API。Safari 从较新版本开始支持，但部分行为可能略有差异。
移动端：目前绝大多数移动浏览器不支持指针锁定 API。iOS Safari 完全不支持，Android Chrome 的支持也非常有限。这是移动操作系统的安全限制所致。因此本工具在移动端会显示提示，建议使用桌面浏览器访问。
检测方法：可通过 document.pointerLockElement !== undefined 或检查 element.requestPointerLock 是否存在来判断浏览器支持情况。

指针锁定 API 有严格的安全限制：
· 必须由用户手势触发（如点击），不能在页面加载时自动激活
· 用户随时可以按 ESC 键强制退出锁定（浏览器级别，网站无法阻止）
· 锁定后浏览器通常会显示退出提示（如"按 ESC 退出指针锁定"）
· 在跨域 iframe 中需要 allow="pointer-lock" 属性
· 切换标签页或最小化窗口时自动解锁
这些机制确保用户始终掌控自己的鼠标，防止恶意网站滥用指针锁定功能。

· 3D 第一人称游戏：视角旋转、瞄准（如 WebGL/Three.js 游戏）
· 3D 模型查看器：旋转、缩放模型时无边界限制
· 虚拟现实 (WebVR/WebXR)：头部和手部追踪的鼠标输入
· 地图应用：拖拽平移时不受屏幕边缘限制
· 绘图/设计工具：需要连续笔触或精确光标控制
· 数据可视化：3D 图表的自由旋转探索
· 在线培训模拟器：飞行模拟、驾驶模拟等

锁定请求无响应：确保在用户手势（click 事件）中调用 requestPointerLock()，不能使用异步回调或定时器触发。
movementX/Y 始终为 0：检查是否在指针锁定后才监听 mousemove 事件。未锁定时这些属性值不可靠。
ESC 后无法重新锁定：这是正常行为。用户需要再次点击来重新触发锁定请求。
iframe 中无法锁定：需要在 iframe 标签添加 allow="pointer-lock" 属性，且父页面和子页面同源或有正确权限。
调试建议：监听 pointerlockerror 事件来捕获锁定失败，使用 pointerlockchange 事件追踪状态变化。

在指针锁定状态下，movementX/Y 持续提供鼠标的相对移动增量，与鼠标在屏幕上的绝对位置无关。本工具将增量累积到虚拟光标坐标上，当虚拟光标到达追踪区域边界时，使用环绕算法（坐标取模）使其从对面重新出现。这直观地展示了指针锁定 API 的核心优势：鼠标物理移动不受屏幕边缘限制，可以朝一个方向无限移动，虚拟光标永不停滞。在真实游戏应用中，通常不会做环绕处理，而是直接将增量应用于视角旋转（如 yaw/pitch 角度）。

事件监听位置：建议在 document 上监听 mousemove 事件（而非锁定元素上），确保捕获所有鼠标移动。
性能优化：使用 requestAnimationFrame 进行渲染循环，在循环中读取累积的移动数据，避免在 mousemove 事件中直接进行大量计算。
DPI 适配：不同系统鼠标 DPI 设置会影响 movementX/Y 的值。可以使用灵敏度系数让用户自行调整。
标签页切换：监听 visibilitychange 事件，在页面隐藏时保存状态，恢复时重新初始化。
浏览器前缀：旧版浏览器可能需要 mozRequestPointerLock 或 webkitRequestPointerLock，建议做兼容处理。