Chcę ukryć kursor podczas wyświetlania strony internetowej, która ma wyświetlać informacje w hali budynku. To wcale nie musi być interaktywne. Próbowałem z właściwością kursora i przezroczystym obrazem kursora, ale nie udało mi się.
Czy ktoś wie, czy można to zrobić? Przypuszczam, że można to uznać za zagrożenie bezpieczeństwa dla użytkownika, który nie może wiedzieć, gdzie klika, więc nie jestem optymistą ... Dziękuję!
Odpowiedzi:
Z CSS:
selector { cursor: none; }Przykład:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Aby ustawić to na elemencie w JavaScript, możesz użyć stylewłaściwości:
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>Jeśli chcesz ustawić to na całym ciele:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>Upewnij się jednak, że naprawdę chcesz ukryć kursor. To naprawdę może irytować ludzi.
1x1przezroczystego png w pikselach lub png przezroczystości 1%.
document.body.style.cursor = 'auto'.
Chociaż cursor: nonerozwią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 mousemovezdarzenia 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();Ż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ą exitPointerLocklub 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 requestPointerLocknie będzie działać z piaskownicy, iframechyba że allow-pointer-lockzezwolenie 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 pointerchangezdarzenia na elemencie, na którym requestPointerLockzostał 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 requestPointerLockzostał wywołany. Można tego odsłuchać po prostu używając mousemovezdarzenia, a następnie uzyskując dostęp do właściwości movementXi movementYobiektu zdarzenia:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});Zrobiłem to z przezroczystym * .cur od 1 do 1 piksela, ale wygląda to jak mała kropka. :( Myślę, że to najlepsza rzecz, jaką mogę zrobić w różnych przeglądarkach. CSS2.1 nie ma wartości „brak” dla właściwości „kursor” - zostało dodane w CSS3. To dlatego działa nie wszędzie.
Jeśli chcesz to zrobić w CSS:
#ID { cursor: none !important; }!important.
Spróbuj tego dla całego dokumentu HTML
html * {cursor:none}Lub jeśli jakiś css nadpisze twój kursor: nie używaj! Ważne
html * {cursor:none!important}Jeśli chcesz ukryć kursor na całej stronie internetowej, użycie bodynie zadziała, chyba że obejmuje całą widoczną stronę, co nie zawsze ma miejsce. Aby upewnić się, że kursor jest ukryty na całej stronie, użyj:
document.documentElement.style.cursor = 'none';Aby go ponownie włączyć:
document.documentElement.style.cursor = 'auto';Analog ze statycznym notacji CSS jest odpowiedź przez Pavel Salaquarda (w istocie: html * {cursor:none})