🀢

锁定鼠标

到目前为止，在鼠标指针锁定 API 时，需要在锁定目标之前，首先将目标元素设定为全屏模式，将来可能会取消这个限制。

锁定鼠标指针 API

鼠标锁定 API 新增了一个 requestPointerLock() 方法：

✂️

e.WebkitRequestPointerLock();
e.mozRequestPointerLock();

锁定鼠标指针 API 处理是一种异步处理方法，鼠标指针锁定 API 通过 pointerlockchange 和 pointerlockerror 事件来通知脚本程序锁定鼠标指针的请求是否成功。

鼠标指针锁定 API 同时扩展了 DOcument 接口，新增了 document 对象的 pointerLockElement 属性和 exitPointerLock() 方法。

✂️

if (
  document.mozPointerLockElement === pointerlockElement ||
  document.WebkitPointerLockElement === pointerlockElement
) {
  location.hash += '鼠标已锁定';
} else {
  location.hash += '鼠标可自由活动';
}

元素的 exitPointerLock() 可以取消鼠标的锁定，因为是一种异步方法，取消成功将触发 pointerlockchange 事件，取消锁定失败将触发 pointerlockerror 事件：

✂️

var pointerLockElement;
var result = document.getElementById('result');
document.addEventListener(
  'mousemove',
  function (e) {
    var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
    var movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0; // 输出鼠标指针移动信息
    console.log('movementX=' + movementX + '， movementY=' + movementY);
  },
  false,
);
function fullscreenChange() {
  if (
    document.webkitFullscreenElement === pointerLockElement ||
    document.mozFullscreenElement === pointerLockElement ||
    document.mozFullScreenElement === pointerLockElement
  ) {
    // 元素已处于全屏状态，现在我们可以请求锁定鼠标指针
    pointerLockElement.requestPointerLock =
      pointerLockElement.requestPointerLock ||
      pointerLockElement.mozRequestPointerLock ||
      pointerLockElement.webkitRequestPointerLock;
    pointerLockElement.requestPointerLock();
  }
}
document.addEventListener('fullscreenchange', fullscreenChange, false);
document.addEventListener('mozfullscreenchange', fullscreenChange, false);
document.addEventListener('webkitfullscreenchange', fullscreenChange, false);
function pointerLockChange() {
  if (
    document.mozPointerLockElement === pointerLockElement ||
    document.webkitPointerLockElement === pointerLockElement
  ) {
    console.log('成功锁定鼠标指针');
  } else {
    console.log('鼠标指针已被停止锁定');
  }
}

document.addEventListener('pointerlockchange', pointerLockChange, false);
document.addEventListener('mozpointerlockchange', pointerLockChange, false);
document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
function pointerLockError() {
  console.log('鼠标指针定时出现错误');
}

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

function lockPointer() {
  pointerLockElement = document.getElementById('pointer-lock-element');
  // 将 id 为 pointer-lock-element 的元素设为全屏状态
  // 目前为止在针对某个元素锁定鼠标指针之前首先要将该元素设为全屏状态
  // 未来可能会取消该限定
  pointerLockElement.requestFullscreen =
    pointerLockElement.requestFullscreen ||
    pointerLockElement.mozRequestFullscreen ||
    pointerLockElement.mozRequestFullScreen ||
    pointerLockElement.webkitRequestFullscreen;
  pointerLockElement.requestFullscreen();
}