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 anzufordern, dass der Zeiger auf dem angegebenen Element gesperrt wird.

Um den Erfolg oder Misserfolg der Anfrage zu verfolgen, ist es notwendig, auf die Ereignisse pointerlockchange und pointerlockerror auf Dokumentebene zu hören.

Hinweis: In der aktuellen Spezifikation kommuniziert requestPointerLock() den Erfolg oder Misserfolg der Anfrage nur durch das Auslösen der Ereignisse pointerlockchange oder pointerlockerror. Ein vorgeschlagenes Update der Spezifikation aktualisiert requestPointerLock(), um ein Promise zurückzugeben, das Erfolg oder Misserfolg kommuniziert. 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

js
requestPointerLock()
requestPointerLock(options)

Parameter

options Optional

Ein Optionsobjekt, das die folgenden Eigenschaften enthalten kann:

unadjustedMovement Optional

Deaktiviert die Betriebssystem-Einstellung für Mausbeschleunigung und greift stattdessen auf die Rohdaten der Maus zu. Der Standardwert ist false; das Setzen auf true deaktiviert die Mausbeschleunigung.

Rückgabewert

Ein Promise, das mit undefined aufgelöst wird.

Sicherheit

Transiente Aktivierung ist erforderlich, wenn requestPointerLock() aufgerufen wird. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit diese Funktion funktioniert. Außerdem muss das zugehörige Dokument des Ziel-Elements im aktiven Zustand sein.

Wenn requestPointerLock() direkt nach dem Freigeben der Zeigersperre über die Standard-Entsperr-Geste (anstatt durch einen exitPointerLock()-Aufruf) aufgerufen wird, schlägt der Aufruf fehl, selbst wenn eine transiente Aktivierung verfügbar ist.

Wenn requestPointerLock() mit requestFullscreen() aufgerufen wird, muss zuerst requestPointerLock() aufgerufen werden, da requestFullscreen() den Zustand 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

Zeigersperre wird oft in Online-Spielen verwendet, wenn Sie möchten, dass Ihre Mausbewegungen sich auf die Steuerung des Spiels konzentrieren, ohne dass der Mauszeiger abgelenkt wird, indem er sich außerhalb des Spielbereichs oder an den Rand des Fensters bewegt.

Um die Zeigersperre zu aktivieren, würden Sie den Benutzer veranlassen, in irgendeiner Weise mit der Benutzeroberfläche zu interagieren, möglicherweise durch Drücken eines Knopfes oder der Spielfläche selbst.

js
canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
});

Betriebssysteme aktivieren standardmäßig die Mausbeschleunigung, was nützlich ist, wenn Sie manchmal langsame präzise Bewegungen wünschen (denken Sie daran, wie Sie ein Grafikprogramm verwenden könnten), aber auch große Entfernungen mit schnelleren Mausbewegungen zurücklegen möchten (denken Sie an Scrollen und das Auswählen mehrerer Dateien). Für einige Spiele aus der Ich-Perspektive wird jedoch bevorzugt, Rohdaten der Maussteuerung für die Drehung der Kamera zu verwenden – wobei dieselbe Entfernungsbewegung, schnell oder langsam, zu derselben Drehung führt. Dies führt laut professionellen Spielern zu einem besseren Spielerlebnis und höherer Genauigkeit.

Um die Mausbeschleunigung auf Betriebssystemebene zu deaktivieren und auf die Rohdaten der Maus zuzugreifen, können Sie das unadjustedMovement auf true setzen:

js
canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock({
    unadjustedMovement: true,
  });
});

Weitere Beispielcodes finden Sie unter:

Spezifikationen

Specification
Pointer Lock 2.0
# dom-element-requestpointerlock

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch