文档：pointerLockElement 属性
pointerLockElement 是 Document 接口的一个只读属性，它提供了在指针被锁定期间作为鼠标事件目标的元素。如果锁定正在挂起、指针未锁定，或者目标在另一个文档中，则它为 null。
值
一个 Element 或 null。
示例
检查指针锁定状态
此示例包含一个 <div> 元素，该元素又包含一个 <button>。点击该按钮会请求 <div> 的指针锁定。
该示例还监听 pointerlockchange 事件：当此事件触发时，事件处理程序会禁用“锁定”按钮（如果文档中的某个元素拥有指针锁定），否则启用该按钮。
效果是：如果您单击“锁定”按钮，指针将被锁定，按钮将被禁用；如果您随后退出指针锁定（例如，通过按 Escape 键），按钮将再次启用。
HTML
html
<div id="container">
<button id="lock">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);
});
结果
规范
| 规范 |
|---|
| 指针锁定 2.0 # dom-documentorshadowroot-pointerlockelement |
浏览器兼容性
加载中…