Skip to main content

Pointer Lock 指针锁定 API

Pointer Lock API 使得鼠标完全脱离了浏览器窗口的限制，可以无限移动，同时隐藏鼠标。

通过它可以访问原始的鼠标运动（基于指针的相对位移 movementX / movementY），把鼠标事件的目标锁定到一个特定的元素，同时隐藏视图中的指针光标（可通过 ESC 显示），并且可以消除鼠标在一个方向上移动的边界限制。

这个 API 对于需要大量的鼠标输入来控制运动，旋转物体，以及更改项目的应用程序来说非常有用。对高度视觉化的应用程序尤其重要，例如那些使用第一人称视角的应用程序，以及 3D 视图和建模。

一、两个方法​

1、requestPointerLock 方法​

请求指针锁定。

element.requestPointerLock();

2、exitPointerLock 方法​

退出指针锁定。

document.exitPointerLock();

二、两个事件​

1、pointerlockchange 事件​

当页面鼠标锁定状态改变的时候触发（如调用 requestPointerLock、exitPointerLock，用户按下 ESC 键等）

document.addEventListener('pointerlockchange', function () {
  // ...
}, false);

2、pointerlockerror 事件​

当调用 requestPointerLock 或 exitPointerLock 失败时触发。

三、属性​

Document.pointerLockElement​

指当前页面触发鼠标无限滚动的元素，通常使用语法为：

var element = document.pointerLockElement;

返回的是一个 DOM 元素对象，如果当前页面是非鼠标锁定状态，则返回值是 null。