Chociaż cursor: none
rozwiązanie CSS jest zdecydowanie solidnym i łatwym obejściem , jeśli Twoim rzeczywistym celem jest usunięcie domyślnego kursora podczas korzystania z aplikacji internetowej lub zaimplementowanie własnej interpretacji nieprzetworzonego ruchu myszy (na przykład w grach FPS), możesz zamiast tego warto rozważyć użycie interfejsu API Pointer Lock .
Możesz użyć requestPointerLock na elemencie, aby usunąć kursor i przekierować wszystkie mousemove
zdarzenia do tego elementu (który możesz obsłużyć lub nie):
document.body.requestPointerLock();
Aby zwolnić blokadę, możesz użyć exitPointerLock :
document.exitPointerLock();
Dodatkowe uwagi
Żaden kursor, naprawdę
To bardzo potężne wywołanie API. Nie tylko sprawia, że kursor jest niewidoczny, ale w rzeczywistości usuwa natywny kursor systemu operacyjnego . Nie będziesz w stanie zaznaczyć tekstu ani nic zrobić za pomocą myszy (z wyjątkiem słuchania niektórych zdarzeń myszy w kodzie), dopóki blokada wskaźnika nie zostanie zwolniona (za pomocą exitPointerLock
lub naciśnięcia ESCw niektórych przeglądarkach).
Oznacza to, że nie możesz opuścić okna z kursorem, aby ponownie się pokazało, ponieważ nie ma kursora.
Ograniczenia
Jak wspomniano powyżej, jest to bardzo potężne wywołanie API, dlatego może być wykonywane tylko w odpowiedzi na pewne bezpośrednie interakcje użytkownika w sieci, takie jak kliknięcie; na przykład:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});
Ponadto requestPointerLock
nie będzie działać z piaskownicy, iframe
chyba że allow-pointer-lock
zezwolenie jest ustawione.
Powiadomienia użytkownika
Niektóre przeglądarki monitują użytkownika o potwierdzenie przed włączeniem blokady, inne po prostu wyświetlają komunikat. Oznacza to, że blokada wskaźnika może nie zostać aktywowana od razu po wywołaniu. Jednak faktycznej aktywacji blokowania wskaźnika można odsłuchać nasłuchując pointerchange
zdarzenia na elemencie, na którym requestPointerLock
został wywołany:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
Większość przeglądarek wyświetla wiadomość tylko raz, ale Firefox od czasu do czasu spamuje wiadomość przy każdym połączeniu. AFAIK, można to obejść tylko za pomocą ustawień użytkownika, zobacz Wyłączanie powiadomienia o blokadzie wskaźnika w przeglądarce Firefox .
Słuchanie surowego ruchu myszy
Interfejs API Pointer Lock nie tylko usuwa mysz, ale zamiast tego przekierowuje surowe dane ruchu myszy do elementu, który requestPointerLock
został wywołany. Można tego odsłuchać po prostu używając mousemove
zdarzenia, a następnie uzyskując dostęp do właściwości movementX
i movementY
obiektu zdarzenia:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});