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

Elementnull

示例

检查指针锁定状态

此示例包含一个 <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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pointerLockElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见