Element: requestPointerLock() Methode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die requestPointerLock() Methode des Element Interfaces ermöglicht es Ihnen, asynchron zu beantragen, dass der Zeiger auf das angegebene Element gesperrt wird.
Um den Erfolg oder das Scheitern der Anfrage zu verfolgen, ist es notwendig, die pointerlockchange und pointerlockerror Ereignisse auf der Ebene des Document zu überwachen.
Hinweis:
In der aktuellen Spezifikation teilt requestPointerLock() den Erfolg oder das Scheitern der Anfrage nur durch das Auslösen von pointerlockchange oder pointerlockerror Ereignissen mit. Ein vorgeschlagenes Update der Spezifikation aktualisiert requestPointerLock(), um ein Promise zu verwenden, das Erfolg oder Misserfolg mitteilt. Diese Seite dokumentiert die Version, die ein Promise zurückgibt. Beachten Sie jedoch, dass diese Version noch kein Standard ist und nicht von allen Browsern implementiert wird. Siehe Browser-Kompatibilität für weitere Informationen.
Syntax
requestPointerLock()
requestPointerLock(options)
Parameter
optionsOptional-
Ein Optionsobjekt, das die folgenden Eigenschaften enthalten kann:
unadjustedMovementOptional-
Deaktiviert die Betriebssystemebenen-Anpassung für Mausbeschleunigung und greift stattdessen auf rohe Mausdaten zu. Der Standardwert ist
false; das Setzen auftruedeaktiviert die Mausbeschleunigung.
Rückgabewert
Sicherheit
Transiente Aktivierung ist erforderlich, wenn requestPointerLock() aufgerufen wird. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit dieses Feature funktioniert. Außerdem muss das zugehörige Dokument des Zielelements im aktiven Zustand sein.
Wenn requestPointerLock() unmittelbar nach der Freigabe der Zeigersperre über die Standard-Entsperrgeste (anstatt durch einen exitPointerLock() Aufruf) aufgerufen wird, wird der Aufruf fehlschlagen, selbst wenn eine transiente Aktivierung verfügbar ist.
Wenn requestPointerLock() zusammen mit requestFullscreen() aufgerufen wird, muss requestPointerLock() zuerst aufgerufen werden, da die requestFullscreen() den Status der transienten Aktivierung verbrauchen wird.
Das allow-pointer-lock Sandbox-Token muss hinzugefügt werden, wenn requestPointerLock() in einem <iframe> Element aufgerufen wird. Außerdem dürfen keine anderen Elemente in anderen <iframe> Elementen im Zeigersperrmodus sein.
Beispiele
Die Zeigersperre wird oft in Online-Spielen verwendet, wenn Sie möchten, dass sich die Mausbewegungen auf die Steuerung des Spiels konzentrieren, ohne die Ablenkung durch den Mauszeiger, der sich bewegt, den Spielbereich verlässt oder den Fensterrand erreicht.
Um die Zeigersperre zu aktivieren, würden Sie den Benutzer dazu bringen, irgendwie mit der Benutzeroberfläche zu interagieren, vielleicht durch das Drücken eines Knopfes oder des Spiel-Canvas selbst.
canvas.addEventListener("click", async () => {
await canvas.requestPointerLock();
});
Betriebssysteme aktivieren die Mausbeschleunigung standardmäßig, was nützlich ist, wenn Sie manchmal langsame, präzise Bewegungen benötigen (denken Sie daran, wie Sie ein Grafikprogramm verwenden könnten), aber auch große Entfernungen mit einer schnelleren Mausbewegung zurücklegen wollen (denken Sie an Scrollen und das Auswählen mehrerer Dateien). Für einige Ego-Shooter-Spiele wird jedoch besser den rohen Mausedaten der Vorzug gegeben, um Kameradrehungen zu steuern — wo die gleiche Entfernungsbewegung, ob schnell oder langsam, zur gleichen Drehung führt. Dies führt laut professionellen Spielern zu einem besseren Spielerlebnis und höherer Genauigkeit.
Um die Betriebssystemebenen-Mausbeschleunigung zu deaktivieren und Zugriff auf rohe Mausdaten zu erhalten, können Sie unadjustedMovement auf true setzen:
canvas.addEventListener("click", async () => {
await canvas.requestPointerLock({
unadjustedMovement: true,
});
});
Für mehr Beispielcode, siehe:
Spezifikationen
| Specification |
|---|
| Pointer Lock 2.0 # dom-element-requestpointerlock |
Browser-Kompatibilität
Loading…