Hvordan få musekoordinater i JavaScript

Mens du surfer gjennom websidene, er det en mulighet for at du vil finne en funksjonsfeil markør, eller at det kreves å hente det samlede dokumentets koordinater for klarhet når du designer et nettsted., eller det kan hende du må opprette forskjellige seksjoner på en webside og justere dem. I slike tilfeller kan det å få musekoordinater i JavaScript hjelpe deg.

Denne artikkelen vil diskutere metodene for å få musekoordinater i JavaScript.

Hvordan få musekoordinater i JavaScript?

For å få musekoordinater i JavaScript, "ClientX”Og“klient”Egenskaper kan brukes med:

• “ved trykk" begivenhet
• “sidex”Og“sidey”Egenskaper med“AddEventListener ()”Metode
• “onmousemove”Arrangement og“getElementById ()”Metode

Vi vil nå gå gjennom hver av de listede metodologiene en etter en!

Metode 1: Få musekoordinater i JavaScript ved å bruke OnClick -arrangementet

“ClientX”Og“klientEgenskaper brukes til å returnere henholdsvis de horisontale og vertikale koordinatene til musepekeren. Mens en “ved trykk”Hendelsen utløses når brukeren klikker på et element. Disse metodene kan implementeres for å få tilgang til de horisontale og vertikale musekoordinatene ved å lokalisere pekerens siste stilling ved hjelp av en spesifisert knapp.

Syntaks

gjenstand.onClick = MouseCoordinates () MyScript;

I syntaks ovenfor, "MouseCoordinates ()”Henviser til funksjonen som vil bli påkalt når en knapp klikkes.

Eksempel

For det første, oppretter en knapp med en OnClick -hendelse som omdirigerer til MouseCoordinates () -funksjonen når den utløses:

Klikk meg for å få musekoordinatene

Deretter definerer du en funksjon som heter “MouseCoordinates ()”Som tar arrangementet som et argument. Når de spesifiserte hendelsene blir utløst, "ClientX”Og“klient”Egenskaper returnerer musens oppdaterte X- og Y -koordinatverdier:

funksjon MouseCoordinates (hendelse)
dokument.skriv ("koordinat (x) =" + hendelse.ClientX + "
Koordinat (y) = " + hendelse.klient);

Ovennevnte implementering resulterer i følgende utgang:

I tilfelle å få musekoordinatene til hele DOM ved rulling, bruk metoden nedenfor.

Metode 2: Få musekoordinater i JavaScript ved å bruke Pagex og Pagey -egenskaper med AddEventListener () -metode

“sidex”Og“sidey”Egenskaper returnerer henholdsvis de horisontale og vertikale koordinatene ved å referere til"Document Object Model (DOM)”På musen svevet og“AddEventListener ()”Metode som knytter en hendelsesbehandler til et dokument. Disse metodene kan brukes for å få koordinatverdiene til den synlige skjermen og hele DOM ved rulling.

Syntaks

dokument.AddEventListener (Mousemove, MouseCoordinates)

I syntaks ovenfor, "Klikk”Refererer til den spesifiserte hendelsen, og“MouseCoordinates”Er funksjonen hendelsen må brukes på.

Eksempel

For det første, juster høyden på den generelle DOM på websiden for å få koordinatverdien “sidey”Når du ruller det:

Deretter definerer du en funksjon som heter “MouseCoordinates ()”Det aksepterer variabelen”begivenhet”Som et argument som diskutert i forrige metode. Denne spesielle variabelen vil bli brukt for å få tilgang til verdien av Pagex, Pagey, Clientx og Clienty -egenskapene for å få koordinatverdiene til hele websiden og den synlige skjermen ved rulling:

funksjon MouseCoordinates (hendelse)
konsoll.Logg ("Pagex:", hendelse.sidex,
"Pagey:", hendelse.sidey,
"Clientx:", hendelse.ClientX,
"Clienty:", arrangement.klient)

Til slutt, legg til en hendelse som heter “Mousemove" og "MouseCoordinates”Som funksjonen som vil bli påkalt for å få koordinatene mens pekeren beveger seg:

vindu.AddEventListener ('Mousemove', MouseCoordinates);

Produksjon

I outputten kan det observeres at mens du blar ned, verdien av "sidey”Øker med økningen i“y-aksen”Av DOM.

Metode 3: Få musekoordinater i JavaScript ved å bruke OnMousemove -hendelsen og GetElementBbyId () Metode

“onmousemove”Hendelsen utløses når pekeren beveger seg på et spesifikt element, og“getElementById ()”Metode henter et element med en spesifisert ID. Disse metodene kan brukes for å vise de svingende koordinatverdiene på musens svever på DOM.

Syntaks

dokument.getElementById (ElementId)

Her, “ElementId”Henviser til den spesifiserte IDen til det ekstra elementet.

Eksempel

For det første, tilordne en ID som heter “produksjon”Til avsnitt. Deretter bruker du “Onmouse”Hendelse til det overordnede dokumentet og tilordne det funksjonen MouseCoordinates () som vil bli påkalt deretter:

dokument.onMousemove = MouseCoordinates;

I neste trinn kan du hente det opprettede avsnittselementet ved å spesifisere IDen i dokumentet.getElementById () Metode:

var output = dokument.getElementById ('output');

Her, definer en funksjon som heter “MouseCoordinates ()”Å ta hendelsen som et argument som diskutert i de tidligere metodene. I sin funksjonsdefinisjon, bruk "ClientX”Og“klient”Egenskaper med arrangementet for å få“X”Og“Y”Musekoordinater når du flytter markøren.

Til slutt, vis de tilsvarende koordinatene på DOM med hensyn til markørens posisjon som innerhtml for det hentede avsnittet kalt "produksjon”:

funksjon MouseCoordinates (hendelse)
var xpos = event.ClientX;
var ypos = event.klient;
produksjon.INNERHTML = "Koordinat (X):" + XPOS + "" + "Piksler
Koordinat (y): " + ypos +" " +" piksler ";

Produksjon

Denne oppskrivningen har samlet metodene for å få musekoordinater i JavaScript.

Konklusjon

For å få musekoordinater i JavaScript, bruk "ClientX”Og“klient”Egenskaper med OnClick -hendelsen for å få de siste musekoordinatene på knappeklikk,“sidex”Og“sidey”Egenskaper og“AddEventListener ()”Metode for å få koordinatene til både den generelle DOM og gjeldende skjerm eller med en“onmousemove”Arrangement og“getElementById ()”Metode for å vise de skiftende koordinatene når du svever musen. Denne bloggen demonstrerte metodene for å få musekoordinater i JavaScript.