Pointer Lock API

Pointer Lock API 用于提供对原始鼠标移动的访问，将鼠标事件的目标锁定到单个元素，消除鼠标移动在单个方向上的距离限制，并从视图中移除光标。常用在第一人称或实时策略游戏。

以下 Can I Use 对 Pointer Lock API 的支持情况：

Pointer Lock API 的支持情况

方法

通过添加 requestPointerLock 新方法来扩展 DOM 元素。它类似 Fullscreen API，目前使用还需要加上厂商前缀，如：

elem.webkitRequestPointerLock() // Chrome
elem.mozRequestPointerLock() // Firefox

事件

pointerlockchange 事件 — 当指针锁定状态改变时 - 例如，当调用 requestPointerLock, exitPointerLock，用户按下 ESC 键，等等。— pointerlockchange 事件被分发到 document。 这是一个简单事件所以不包含任何的额外数据。

document.addEventListener('pointerlockchange', pointerLockChange)
document.addEventListener('mozpointerlockchange', pointerLockChange)
document.addEventListener('webkitpointerlockchange', pointerLockChange)

pointerlockerror 事件 — 当调用 requestPointerLock 或 exitPointerLock而引发错误时， pointerlockerror 事件被分发到 document。这是一个简单事件所以不包含任何的额外数据。

document.addEventListener('pointerlockerror', pointerLockError)
document.addEventListener('mozpointerlockerror', pointerLockError)
document.addEventListener('webkitpointerlockerror', pointerLockError)

示例

下面是来自 MDN 的示例，你可以在这👉 查看效果。

// 我们将要使之全屏并指针锁定的元素。
var elem;

document.addEventListener(
  "mousemove",
  function (e) {
    var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0,
      movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;

    // 打印鼠标移动的增量值。
    console.log("movementX=" + movementX, "movementY=" + movementY);
  },
  false
);

function fullscreenChange() {
  if (
    document.webkitFullscreenElement === elem ||
    document.mozFullscreenElement === elem ||
    document.mozFullScreenElement === elem
  ) {
    // 较旧的 API 大写 'S'.
    // 元素进入全屏模式了，现在我们可以请求指针锁定。
    elem.requestPointerLock =
      elem.requestPointerLock ||
      elem.mozRequestPointerLock ||
      elem.webkitRequestPointerLock;
    elem.requestPointerLock();
  }
}

document.addEventListener("fullscreenchange", fullscreenChange)
document.addEventListener("mozfullscreenchange", fullscreenChange)
document.addEventListener("webkitfullscreenchange", fullscreenChange)

function pointerLockChange() {
  if (
    document.mozPointerLockElement === elem ||
    document.webkitPointerLockElement === elem
  ) {
    console.log("指针锁定成功了。");
  } else {
    console.log("指针锁定已丢失。");
  }
}

document.addEventListener("pointerlockchange", pointerLockChange)
document.addEventListener("mozpointerlockchange", pointerLockChange)
document.addEventListener("webkitpointerlockchange", pointerLockChange)

function pointerLockError() {
  console.log("锁定指针时出错。");
}

document.addEventListener("pointerlockerror", pointerLockError)
document.addEventListener("mozpointerlockerror", pointerLockError)
document.addEventListener("webkitpointerlockerror", pointerLockError)

function lockPointer() {
  elem = document.getElementById("pointer-lock-element");
  // 开始于使元素进入全屏模式。目前的实现
  // 要求元素在请求指针锁定前要处于全屏模式下
  // -- 这在以后可能会发生改变。
  elem.requestFullscreen =
    elem.requestFullscreen ||
    elem.mozRequestFullscreen ||
    elem.mozRequestFullScreen || // 较旧的 API 把 ‘S’ 大写
    elem.webkitRequestFullscreen;
  elem.requestFullscreen();
}