Element: requestPointerLock() 方法

语法

requestPointerLock()
requestPointerLock(options)

参数

options 可选

一个选项对象，其中可以包含以下属性

unadjustedMovement 可选

禁用操作系统级别的鼠标加速调整，而是访问原始鼠标输入。默认值为 false；将其设置为 true 将禁用鼠标加速。

返回值

一个 Promise，它会解析为 undefined。

安全

调用 requestPointerLock() 时需要 瞬时激活。用户必须与页面或 UI 元素进行交互，此功能才能正常工作。此外，目标元素的关联文档必须处于活动状态。

如果调用 requestPointerLock() 紧接着通过默认的解锁手势（而不是通过 exitPointerLock() 调用）释放了指针锁，则调用将失败，即使存在 瞬时激活。

如果调用 requestPointerLock() 时还调用了 requestFullscreen()，则必须先调用 requestPointerLock()，因为 requestFullscreen() 会消耗 瞬时激活 的状态。

在 <iframe> 元素中调用 requestPointerLock() 时，必须添加 allow-pointer-lock 沙箱令牌。此外，其他 <iframe> 元素中的其他元素不得处于指针锁定模式。

示例

指针锁定通常用于在线游戏中，当您希望鼠标移动专注于控制游戏，而不受鼠标指针四处移动、移出游戏区域或到达窗口边缘的干扰时。

要启用指针锁定，您需要让用户以某种方式与 UI 进行交互，例如通过按下按钮或游戏画布本身。

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
});

操作系统默认启用鼠标加速，这在您有时需要缓慢精确移动（想想图形软件包）但又希望通过更快的鼠标移动（想想滚动和选择多个文件）来移动大距离时很有用。然而，对于一些第一人称视角游戏，原始鼠标输入数据更适合控制相机旋转——无论鼠标移动是快还是慢，相同的距离移动都会导致相同的旋转。据专业游戏玩家称，这可以带来更好的游戏体验和更高的准确性。

要禁用操作系统级别的鼠标加速并访问原始鼠标输入，您可以将 unadjustedMovement 设置为 true

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock({
    unadjustedMovement: true,
  });
});

有关更多示例代码，请参阅

• 指针锁定演示（查看源代码）
• Pointer Lock API
• 禁用鼠标加速以提供更好的 FPS 游戏体验

规范

浏览器兼容性

另见

• Document.pointerLockElement
• Document.exitPointerLock()
• 指针锁定