Document: pointerLockElement-Eigenschaft

Wert

Ein Element oder null.

Beispiele

berprfen des Pointer-Lock-Status

Dieses Beispiel enthlt ein <div>-Element, das seinerseits ein <button> enthlt. Durch Klicken auf den Button wird eine Zeigersperre fr das <div> angefordert.

Das Beispiel hrt auch auf das pointerlockchange-Ereignis: Wenn dieses Ereignis ausgelst wird, deaktiviert der Ereignishandler den "Sperren"-Button, wenn ein Element im Dokument die Zeigersperre hat, und aktiviert den Button andernfalls.

Der Effekt ist, dass, wenn Sie auf den "Sperren"-Button klicken, der Zeiger gesperrt wird und der Button deaktiviert wird: Wenn Sie dann die Zeigersperre aufheben (zum Beispiel durch Drcken der Escape-Taste), wird der Button wieder aktiviert.

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

Ergebnis

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Document.exitPointerLock()
• Element.requestPointerLock()
• Pointer Lock