Document：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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅