本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
Pointer Lock API中文叫做指针锁定或者鼠标锁定。Pointer Lock API提供了一种输入方法，这种方法是基于鼠标随着时间推移的运动的（也就是说，deltas），而不仅是鼠标光标的绝对位置。通过它可以访问原始的鼠标运动，把鼠标事件的目标锁定到一个单独的元素，这就消除了鼠标在一个单独的方向上到底可以移动多远这方面的限制，并从视图中删去光标。
用一句话说明Pointer Lock API的作用就是：Pointer Lock API可以让你的鼠标无限移动，脱离浏览器窗体的限制！
这对于一些需要鼠标控制的应用非常有用。举个例子：某3D VR女友的游戏，你鼠标向上移动，则你的视角就会往下。
在默认网页环境下，你鼠标移动到浏览器上边缘就不能再往上了，结果，本来还差一点点角度就能看到胖次，结果卡在了关键地方，岂不非常影响游戏体验。
但是如果使用了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的属性，事件和方法，下面我们再来一篇实战。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » Pointer Lock API大全