王晨旭的个人网站
2018-08-07

HTML5 指针锁定API: Pointer Lock API

说明

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

语法

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

requestPointerLock 方法

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

element.requestPointerLock();

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

exitPointerLock 方法

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

document.exitPointerLock();

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

pointerlockchange 事件

当指针锁定状态改变时(如:调用 requestPointerLockexitPointerLock,用户按下 ESC 键),pointerlockchange 事件被分发到 document。 这是一个简单事件,不包含任何的额外数据。

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

pointerlockerror 事件

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

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

movement 事件的扩展

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

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

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

其他注意事项

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

上一篇:HTML5 协议处理: Web-based Protocol Handlers 下一篇:关于