Hvordan Få Nåværende Mus Plasser i Javascript

Hvordan Få Nåværende Mus Plasser i Javascript


Når de besøkende bevege musepekere, kan du spore disse bevegelsene ved hjelp av Javascript. Når du vet X- og Y-koordinatene til brukerens markøren, kan du programmere din søknad til å samhandle med musen. Lag markøren løyper som følger markøren, animere objekter på skjermen eller skrive spill som samhandler med en brukers mus. For å fange musebevegelser på en webside, feste en hendelseshåndterer i dokumentet, og legge litt Javascript til siden din.

Bruksanvisning

1 Åpne et HTML-dokument og legge til denne koden til sin <body> -delen:

<body onmousemove = "getCoordinates (event);" >

<Textarea id = "TextArea1" rader = "5" kolonner = "80"> </ textarea>

Den onmousemove eiendom skaper en hendelse som utløses når du beveger musen over kroppen til en webside. Når hendelsens branner, kaller det Javascript-funksjonen heter getCoordinates de. Den andre kodelinje skaper en textarea kontroll som viser muse posisjoner mens du beveger musen.

2 Legg til Javascript-funksjonen til dokumentets <head> seksjonen:

<Script type = "text / javascript">

funksjons getCoordinates (event) {

Var screenX = event.screenX;

Var screeny = event.screenY;

Var clientX = event.clientX;

Var clientY = event.clientY;

if (event.pageX) {

Var pageX = event.pagex;

Var pageY = event.pageY;

}

else {

pageX = event.clientX + document.body.scrollLeft;

pageY = event.clientY + document.body.scrollTop;

}

Var koordinerer =

"ScreenX =" + screenX + ".. screeny =" + screeny +

".. ClientX =" + clientX + ".. clientY =" + clientY +

".. PageX =" + pageX + ".. pageY =" + pageY;

Var textarea = document.getElementById ( "TextArea1");

textArea.value = koordinater;

} </ Script>

Denne funksjonen ser på "event" sendes til det når musen bevegelse oppstår. Funksjonen lagrer deretter hendelsens clientX, clientY, pageX, pageY, og screenX og screeny verdier i seks variabler. De siste to linjer med kode vise disse verdiene i tekstfeltet når du beveger musen.

3 Lagre HTML-dokumentet og åpne den i en nettleser. Når du beveger musen rundt på nettsiden, viser den pekerens plassering.

Hint

  • Legg merke til at Javascript-funksjonen fanger X og Y-koordinatene for tre typer eiendommer: klient, side og skjerm. ClientX og clientY, for eksempel, holder muse posisjon i forhold til nettleseren klientområdet. ScreenX og screeny viser den stilling i forhold til hele skjermen. Den pageX verdi lik clientX verdi pluss eventuelle offset som oppstår når en bruker ruller til venstre eller høyre. Den pageY verdi lik clientY pluss enhver forskyvning som oppstår når en bruker ruller opp eller ned. Disse "side" verdier er nyttig for å oppdage musen posisjon i forhold til den øverste venstre kant av selve websiden, uansett hvor langt brukeren ruller horisontalt eller vertikalt.