• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

Pointer Lock API大全

JavaScript web前端中文站 3年前 (2017-10-18) 1106次浏览 已收录 0个评论

Pointer Lock API 中文叫做指针锁定或者鼠标锁定。Pointer Lock API 提供了一种输入方法,这种方法是基于鼠标随着时间推移的运动的(也就是说,deltas),而不仅是鼠标光标的绝对位置。通过它可以访问原始的鼠标运动,把鼠标事件的目标锁定到一个单独的元素,这就消除了鼠标在一个单独的方向上到底可以移动多远这方面的限制,并从视图中删去光标。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

用一句话说明 Pointer Lock API 的作用就是:Pointer Lock API 可以让你的鼠标无限移动,脱离浏览器窗体的限制!

这对于一些需要鼠标控制的应用非常有用。举个例子:某 3D VR 女友的游戏,你鼠标向上移动,则你的视角就会往下。

Pointer Lock API 大全

在默认网页环境下,你鼠标移动到浏览器上边缘就不能再往上了,结果,本来还差一点点角度就能看到胖次,结果卡在了关键地方,岂不非常影响游戏体验。

但是如果使用了 Pointer Lock API,就不会出现这样的问题,鼠标可以无限移动,坐标可以无限增大,完全脱离了浏览器窗口的限制,可以完美享受沉浸式操作体验。

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

3 个属性:

Document.pointerLockElement
Document.onpointerlockchange
Document.onpointerlockerror

2 个方法:

Element.requestPointerLock()
 Document.exitPointerLock()

2 个事件

pointerlockchange
pointerlockerror

其中,2 个事件和其中 2 个属性是一一对应的,因此,我们实际上需要了解的知识点是下面这些:
Document.pointerLockElement,以及 Element.requestPointerLock(),Document.exitPointerLock()以及 pointerlockchange 和 pointerlockerror 事件。

下面我们一一的介绍他们的用法。

Document.pointerLockElement()

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

 var element = document.pointerLockElement;

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

Element.requestPointerLock()

可以让页面进入鼠标锁定状态(鼠标直接消失),鼠标无限滚动,坐标无限变化。通常使用语法为:

 var element.requestPointerLock();

Document.exitPointerLock()

让页面从鼠标锁定状态退出,通常使用语法为:

 document.exitPointerLock();

浏览器默认支持按下 ESC 键退出鼠标锁定状态,但是用户有时候更习惯于点击取消等,此时就可以使用 document.exitPointerLock()进行设置。

pointerlockchange 事件

当页面鼠标锁定状态改变的时候触发。例如:

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

pointerlockerror 事件

当页面鼠标锁定失败的时候触发。例如当你试图同时锁定同一个页面的多个<iframe>时候,就会触发这个出错事件。

本文只是介绍了 Pointer Lock API 的属性,事件和方法,下面我们再来一篇实战。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Pointer Lock API 大全
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址