html - Er det mulig å skjule markøren på en nettside ved hjelp av CSS eller Javascript?

Jeg vil skjule markøren når jeg viser en nettside som er ment å vise informasjon i en bygninghall. Den trenger ikke å være interaktiv i det hele tatt. Jeg prøvde å endre markør-egenskapen og bruke et gjennomsiktig markørbilde, men det løste ikke problemet mitt.

Vet noen om dette kan gjøres? Jeg antar at dette kan sees på som en sikkerhetstrussel for en bruker som ikke kan vite hva han klikker på, så jeg er ikke veldig optimistisk... Takk!

Svar #1

Med CSS:

selector { cursor: none; }

Et eksempel:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>

For å sette dette på et element i Javascript, kan du bruke style-egenskapen:

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>

Hvis du vil sette dette på hele kroppen:

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

Pass på at du virkelig vil skjule markøren, altså. Det kan virkelig irritere folk.

Svar #2

Pointer Lock API

Mens cursor: none CSS-løsningen definitivt er en solid og enkel omgåelse, hvis ditt faktiske mål er å fjerne standardpekeren mens webapplikasjonen din brukes, eller implementere din egen tolkning av rå musebevegelser (for FPS-spill, for eksempel), kan det være lurt å vurdere å bruke Pointer Lock API i stedet.

Du kan bruke requestPointerLock på et element for å fjerne markøren, og omdirigere alle mousemove-hendelser til det elementet (som du kan eller ikke kan håndtere):

document.body.requestPointerLock();

For å frigjøre låsen, kan du bruke exitPointerLock:

document.exitPointerLock();

Tilleggsnotater

Ingen markør, på alvor

Dette er et veldig kraftig API-kall. Det gjør ikke bare markøren din usynlig, men det fjerner faktisk operativsystemets native markør. Du vil ikke kunne velge tekst, eller gjøre noe med musen din (bortsett fra å lytte til noen musehendelser i koden din) før pekerlåsen blir frigitt (enten ved å bruke exitPointerLock eller trykke ESC i noen nettlesere).

Det vil si, du kan ikke la vinduet stå med markøren din for at det skal vises igjen, siden det ikke finnes noen markør.

Begrensninger

Som nevnt ovenfor, er dette et veldig kraftig API-kall, og det er derfor kun tillatt å utføre som svar på en direkte brukerinteraksjon på nettet, for eksempel et klikk; for eksempel:

document.addEventListener("click", function () {
    document.body.requestPointerLock();
});

Også vil requestPointerLock ikke fungere fra en sandkasselagt iframe med mindre tillatelsen allow-pointer-lock er satt.

Brukermeldinger

Noen nettlesere vil be brukeren om en bekreftelse før låsen aktiveres, noen vil bare vise en melding. Dette betyr at pekerlås kanskje ikke aktiveres med en gang etter kallet. Den faktiske aktiveringen av pekerlås kan imidlertid følges ved å lytte til pointerchange-hendelsen på elementet hvor requestPointerLock ble kalt:

document.body.addEventListener("pointerlockchange", function () {
    if (document.pointerLockElement === document.body) {
        // Pointer is now locked to <body>.
    }
});

De fleste nettlesere vil bare vise meldingen én gang, men Firefox vil av og til sende meldingen på hver eneste kall. Så vidt jeg vet kan dette bare omgås ved brukerinnstillinger, se Deaktiver pekeren-lås-melding i Firefox.

Lytte til rå musebevegelse

Pointer Lock API fjerner ikke bare musen, men sender i stedet rå musebevegelsesdata til elementet requestPointerLock ble kalt på. Dette kan enkelt lyttes til ved å bruke mousemove-hendelsen, og deretter få tilgang til movementX og movementY-egenskapene på hendelsesobjektet:

document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});

Svar #3

Hvis du vil skjule markøren på hele nettsiden, vil ikke bruk av body fungere med mindre det dekker hele den synlige siden, noe som ikke alltid er tilfelle. For å sørge for at markøren er skjult overalt på siden, bruk:

document.documentElement.style.cursor = 'none';

For å aktivere det igjen:

document.documentElement.style.cursor = 'auto';