Pointer Lock API

目前，Pointer Lock API共支持3个属性，2个方法和2个事件，分别如下：

3个属性
Document.pointerLockElement
Document.onpointerlockchange
Document.onpointerlockerror
2个方法
Element.requestPointerLock()
Document.exitPointerLock()
2个事件
pointerlockchange
pointerlockerror

方法（异步）

(1)Element.requestPointerLock()
可以让页面进入鼠标锁定状态（鼠标直接消失），鼠标无限滚动，坐标无限变化。

(2)Document.exitPointerLock()
让页面从鼠标锁定状态退出

事件

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

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

鼠标事件扩展

鼠标事件的两个新参数—movementX
和 movementY
—提供了鼠标位置的变化情况。这两个参数的值，等于两个MouseEvent属性（ screenX和 screenY）之间值的变化程度，这些 MouseEvent 属性被存储在两个连续的鼠标移动事件（ eNow和 ePrevious
）中。换言之，指针锁定参数 movementX = eNow.screenX - ePrevious.screenX
。（译注：不存在名为 eNow 或 ePrevious 的事件或属性，eNow 代指当前的鼠标移动事件，ePrevious 代指前一个鼠标移动事件）

锁定状态

当指针锁定被启动之后，正常的 MouseEvent 属性 clientX, clientY, screenX, 和 screenY ，保持不变，就像鼠标没有在移动一样。 movementX 和 movementY 属性持续提供鼠标的位置变化。如果鼠标在一个方向上持续移动，movementX 和 movementY的值是没有限制的。不存在鼠标光标的概念，而且光标无法移到窗口之外，而且也不会被屏幕边缘所固定。

未锁定状态

无论鼠标锁定状态是怎样的， movementX 和 movementY 参数一直有效，并且为了方便起见，甚至在未锁定状态也是有效的。
当鼠标被解除锁定，系统光标可以退出并重新进入浏览器窗口。如果发生这种情况，movementX 和 movementY 会被设置成0。

属性

Document.pointerLockElement
当前页面触发鼠标无限滚动的元素，适用于确定当前是否有被指针锁定的元素（例如，用来做一个布尔检查），以及当有元素被锁定时获取该元素的一个引用

// 1) 用于布尔检查--我们被指针锁定了吗？
if (!!document.pointerLockElement) {
  // 指针被锁定
} else {
  // 指针未被锁定
}

// 2) 用于访问指针锁定的元素
if (document.pointerLockElement === someElement) {
  // someElement 当前被指针锁定
}

var eleImage = document.getElementById('image');
  if (eleImage) {
    // 起始值
    var moveX = 0, moveY = 0;
    // 图片无限变换的方法
    var rotate3D = function (event) {
      moveX = moveX + event.movementX;
      moveY = moveY + event.movementY;
      eleImage.style.transform = 'rotateX(' + moveY + 'deg) rotateY(' + moveX + 'deg)';
    };
    
    // 触发鼠标锁定
    eleImage.addEventListener('click', function () {
      eleImage.requestPointerLock();
    });
    
    // 再次点击页面，取消鼠标锁定处理
    document.addEventListener('click', function () {
      if (document.pointerLockElement == eleImage) {
        document.exitPointerLock();
      }
    });
    
    // 检测鼠标锁定状态变化
    document.addEventListener('pointerlockchange', function () {
      if (document.pointerLockElement == eleImage) {
        document.addEventListener("mousemove", rotate3D, false);
      } else {
        document.removeEventListener("mousemove", rotate3D, false);
      }
    }, false);
  }