Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/zh-CN/docs/Web/API/Document/pointerLockElement below:

Document：pointerLockElement 属性 - Web API

Limited availability

Document 接口的 pointerLockElement 只读属性提供了指针锁定时鼠标事件的目标元素。如果指针处于锁定等待中、指针没有被锁定或目标元素在另外一个文档中，返回 null。

Element 或 null。

此示例包含一个 <div> 元素，该元素又包含一个 <button>。单击按钮会请求 <div> 的指针锁定。

此示例还监听 pointerlockchange 事件：触发此事件时，如果文档中的元素具有指针锁定，则事件处理程序会禁用“锁定”按钮，否则启用该按钮。

这样做的效果是，如果你单击“锁定”按钮，指针将被锁定，按钮将被禁用：如果你随后退出指针锁定（例如，按 Escape 键），按钮将再次启用。

<div id="container">
  <button id="lock">锁定</button>
</div>

div {
  height: 100px;
  width: 200px;
  border: 2px solid blue;
}

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);
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4