元素：requestPointerLock() 方法

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

requestPointerLock() 是 Element 接口的方法，它允许您异步请求将指针锁定在给定元素上。

要跟踪请求的成功或失败，需要在 Document 级别监听 pointerlockchange 和 pointerlockerror 事件。

注意： 在当前规范中，requestPointerLock() 仅通过触发 pointerlockchange 或 pointerlockerror 事件来通知请求的成功或失败。 规范中提出的更新 更新了 requestPointerLock()，使其返回一个 Promise 来通知成功或失败。 本页面记录返回 Promise 的版本。 然而，请注意，此版本尚未成为标准，并且并非所有浏览器都实现了它。 有关更多信息，请参见 浏览器兼容性。

语法

js
requestPointerLock()
requestPointerLock(options)

参数

options 可选

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

unadjustedMovement 可选

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

返回值

一个 Promise，它解析为 undefined。

安全

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

如果在通过默认解锁手势（而不是通过 exitPointerLock() 调用）释放指针锁定后立即调用 requestPointerLock()，即使 瞬时激活 可用，调用也会失败。

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

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

示例

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

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

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

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

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

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

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

规范

规范
指针锁定 2.0
# dom-element-requestpointerlock

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅