Die cursor: noneCSS-Lösung ist definitiv eine solide und einfache Problemumgehung . Wenn Ihr eigentliches Ziel darin besteht , den Standardcursor zu entfernen, während Ihre Webanwendung verwendet wird, oder Ihre eigene Interpretation der rohen Mausbewegung zu implementieren (z. B. für FPS-Spiele), können Sie dies tun Sie möchten stattdessen die Zeigersperr-API verwenden.
Sie können requestPointerLock für ein Element verwenden, um den Cursor zu entfernen und alle mousemoveEreignisse auf dieses Element umzuleiten (das Sie möglicherweise behandeln oder nicht behandeln):
document.body.requestPointerLock();
Um die Sperre aufzuheben , können Sie exitPointerLock verwenden :
document.exitPointerLock();
Zusätzliche Bemerkungen
Eigentlich kein Cursor
Dies ist ein sehr leistungsfähiger API-Aufruf. Es macht Ihren Cursor nicht nur unsichtbar, sondern entfernt auch den nativen Cursor Ihres Betriebssystems . Sie können keinen Text auswählen oder etwas mit Ihrer Maus tun (außer einige Mausereignisse in Ihrem Code abhören), bis die Zeigersperre aufgehoben wird (entweder durch Verwenden exitPointerLockoder Drücken ESCin einigen Browsern).
Das heißt, Sie können das Fenster nicht mit Ihrem Cursor verlassen, damit es erneut angezeigt wird, da kein Cursor vorhanden ist.
Beschränkungen
Wie oben erwähnt, ist dies ein sehr leistungsfähiger API-Aufruf und darf daher nur als Reaktion auf eine direkte Benutzerinteraktion im Web erfolgen, z. B. durch Klicken. beispielsweise:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});
Funktioniert auch requestPointerLocknicht in einer Sandbox, iframewenn die allow-pointer-lockBerechtigung nicht festgelegt ist.
Benutzerbenachrichtigungen
Einige Browser fordern den Benutzer zur Bestätigung auf, bevor die Sperre aktiviert wird, andere zeigen einfach eine Nachricht an. Dies bedeutet, dass die Zeigersperre möglicherweise nicht sofort nach dem Anruf aktiviert wird. Die tatsächliche Aktivierung der Zeigersperre kann jedoch abgehört werden, indem das pointerchangeEreignis auf dem Element abgehört wird, für das Folgendes requestPointerLockaufgerufen wurde:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
Die meisten Browser zeigen die Nachricht nur einmal an, aber Firefox spammt die Nachricht gelegentlich bei jedem einzelnen Anruf. AFAIK, dies kann nur durch Benutzereinstellungen umgangen werden, siehe Deaktivieren der Zeigersperrbenachrichtigung in Firefox .
Rohe Mausbewegung hören
Die Zeigersperr-API entfernt nicht nur die Maus, sondern leitet auch rohe Mausbewegungsdaten an das requestPointerLockaufgerufene Element weiter. Dies kann einfach über das mousemoveEreignis und den Zugriff auf die Eigenschaften movementXund movementYfür das Ereignisobjekt abgehört werden:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});