Document: pointerLockElement-Eigenschaft

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Wert

EinElement odernull.

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 daspointerlockchange-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 derEscape-Taste), wird der Button wieder aktiviert.

HTML

html

<div>  <button>Lock</button></div>

CSS

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