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ü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.
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
<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
Specification |
---|
Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |
Browser-Kompatibilität
BCD tables only load in the browser