Hvordan spore museposisjon i JavaScript

Sporing av en museposisjon er en interessant oppgave som sporer koordinatene til pekeren. Den trekker ut x- og y -koordinatene til hele nettsiden eller spesifisert område definert av brukeren. JavaScript gir “Clientx” og “Klient” Egenskaper for å spore musepekeren i det nåværende vinduet. Disse egenskapene finner ut hvor brukerens mus ligger i X- og Y -koordinatene i nettleservinduet. I dette innlegget vil vi demonstrere måten for å spore en museposisjon.

Hvordan spore museposisjon i JavaScript?

I JavaScript, to eiendommer, “Clientx” og “Klient”, brukes til å spore en museposisjon i det synlige området i nettleseren. Begge egenskapene utføres i et spesifisert område levert av brukeren.

Syntaksen til “ClientX”Og“klient”Egenskaper er gitt nedenfor:

Syntaks av ClientX

begivenhet.ClientX

“ClientX”Returnerer musens horisontale akse.

Syntaks av klient

begivenhet.ClientX

Tilsvarende “Klient” Eiendom returnerer den vertikale aksen med bevegelsen av musepekeren.

Eksempel

Eksemplet forklarer bruken av sporing av museposisjon i JavaScript.

HTML -kode

Eksempel for å spore museposisjon i JavaScript

X Musposisjon: .

Y Musposisjon: .

Forklaringen på koden er som følger:

• For det første div taggen opprettes og en "Div1”Id er tilordnet det.
• Forskjellige egenskaper, inkludert høyde, bredde, grense, og posisjon, brukes innenfor stikkord.
• Etter det, getCursorPosition () metoden brukes ved å passere en "begivenhet".
• Etter det, “X museposisjon” og “Y Mouse Position” trekkes ut med markørbevegelsen.
• Til slutt tildeles kildebanen til JavaScript -filen "test.JS ” innenfor stikkord.

Koden for “test.JS”Fil er gitt nedenfor:

JavaScript -kode

funksjon getCursorPosition (hendelse)
dokument.getElementById ("C_P_X").TextContent = Event.ClientX;
dokument.GetElementById ("C_P_Y").TextContent = Event.klient;

I denne koden:

• For det første getCursorPosition () metoden kalles og et argument blir gitt navngitt "begivenhet".
• Etter det, dokument.getElementById brukes til å trekke ut HTML -elementene hvis ID -er er “C_P_X” og “C_P_Y”.
• De begivenhet.ClientX returnerer den horisontale koordinaten basert på klientområdet og "begivenhet.klient ” er ansatt ved å returnere den vertikale koordinaten i nettleseren.

Produksjon

Utgangen viser det “X museposisjon” og “Y Mouse Position” spores ved å endre museposisjonen i nettleseren.

Konklusjon

I JavaScript, “Clientx” og “Klient” Egenskaper sporer museposisjonen. Disse egenskapene kan kombineres med en brukerdefinert funksjon for å få koordinatene til museposisjonen. Dette innlegget har vist metoden for å spore museposisjon i JavaScript ved å bruke "ClientX”Og“klient" egenskaper. Eksemplet som praktiseres her viser at x-koordinat og y-koordinat oppdateres dynamisk når en mus beveger seg.