Document: pointerLockElement-Eigenschaft

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die schreibgeschützte pointerLockElement-Eigenschaft des Document-Interfaces liefert das Element, das als Ziel für Mausereignisse festgelegt ist, während der Zeiger gesperrt ist. Sie ist null, wenn die Sperre aussteht, der Zeiger entsperrt ist oder das Ziel sich in einem anderen Dokument befindet.

In diesem Artikel

Wert

Ein Element oder null.

Beispiele

Überprüfen des Pointer-Lock-Status

Dieses Beispiel enthält ein <div>-Element, das seinerseits ein <button> enthält. Durch Klicken auf den Button wird eine Zeigersperre für das <div> angefordert.

Das Beispiel hört auch auf das pointerlockchange-Ereignis: Wenn dieses Ereignis ausgelöst 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 Drücken der Escape-Taste), wird der Button wieder aktiviert.

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Document: pointerLockElement-Eigenschaft

In diesem Artikel

Wert

Beispiele

Überprüfen des Pointer-Lock-Status

HTML

CSS

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN