Документ: свойство pointerLockElement

Чтение только свойство pointerLockElement интерфейса Document предоставляет элемент, установленный в качестве цели для событий мыши, когда указатель заблокирован. Оно null если блокировка ожидает обработки, указатель разблокирован или целевой элемент находится в другом документе.

Элемент Element или null.

В этом примере содержится элемент <div>, который, в свою очередь, содержит элемент <button>. Нажатие кнопки запрашивает блокировку указателя для элемента <div>.

Пример также прослушивает событие pointerlockchange: когда это событие срабатывает, обработчик событий отключает кнопку "Заблокировать", если элемент в документе имеет блокировку указателя, и включает кнопку в противном случае.

В результате, если вы нажмёте кнопку "Заблокировать", указатель заблокируется, и кнопка станет неактивной: если вы выйдете из режима блокировки указателя (например, нажав клавишу Escape), кнопка снова станет активной.

HTML

<div id="container">
  <button id="lock">Lock</button>
</div>

CSS

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

JavaScript

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

Результат

• Document.exitPointerLock()
• Element.requestPointerLock()
• Блокировка указателя