HTML5 指针锁定API: Pointer Lock API

说明

指针锁定(以前叫做鼠标锁定) 是一种输入方法，这种方法是基于指针的相对位移（movement），而不是绝对位置，而不仅是指针的绝对位置。此API将鼠标指针锁定到特定元素上（同时将指针光标从视图中移除），并获取原始的指针位移，这样就能不受元素边界的约束而无限移动，且不会移出元素。

语法

Pointer lock API 提供两个新的方法、两个新的事件，并对对一个事件进行了扩展。

requestPointerLock 方法

requestPointerLock方法用来请求指针锁定，此方法扩展了 DOM 元素，具体语法如下：

element.requestPointerLock();

注意 requestPointerLock方法可能需要添加浏览器前缀才能使用。

exitPointerLock 方法

exitPointerLock方法用来推出指针锁定，此方法扩展了document对象，具体语法如下：

document.exitPointerLock();

注意 exitPointerLock方法可能需要添加浏览器前缀才能使用。

pointerlockchange 事件

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

注意 pointerlockchange 事件可能需要添加浏览器前缀才能使用。

pointerlockerror 事件

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

注意 pointerlockerror 事件可能需要添加浏览器前缀才能使用。

movement 事件的扩展

Pointer lock API 对MouseEvent事件增加了 movement 属性：

partial interface MouseEvent {
    readonly attribute long movementX;
    readonly attribute long movementY;
};

注意 movement 属性可能需要添加浏览器前缀才能使用。

其他注意事项

只有网页处于全屏状态下，指针锁定才会成功，当退出全屏后，指针锁定也会自动退出。