Document：pointerLockElement 属性
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Document 接口的 pointerLockElement 只读属性提供了指针锁定时鼠标事件的目标元素。如果指针处于锁定等待中、指针没有被锁定或目标元素在另外一个文档中，返回 null。
值
Element 或 null。
示例
检查指针锁定状态
此示例包含一个 <div> 元素，该元素又包含一个 <button>。单击按钮会请求 <div> 的指针锁定。
此示例还监听 pointerlockchange 事件：触发此事件时，如果文档中的元素具有指针锁定，则事件处理程序会禁用“锁定”按钮，否则启用该按钮。
这样做的效果是，如果你单击“锁定”按钮，指针将被锁定，按钮将被禁用：如果你随后退出指针锁定（例如，按 Escape 键），按钮将再次启用。
HTML
html
<div id="container">
<button id="lock">锁定</button>
</div>
CSS
css
div {
height: 100px;
width: 200px;
border: 2px solid blue;
}
JavaScript
js
const lock = document.querySelector("#lock");
const container = document.querySelector("#container");
lock.addEventListener("click", () => {
container.requestPointerLock();
});
document.addEventListener("pointerlockchange", () => {
const locked = document.pointerLockElement;
lock.disabled = Boolean(locked);
});
结果
规范
| Specification |
|---|
| Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |