For at programmere nogle handlinger som reaktion på markørens bevægelse i browservinduet er det undertiden nødvendigt at bestemme dets koordinater. Dette kan gøres ved hjælp af et script, der har evnen til at spore begivenheder, der opstår i browseren. Et JavaScript-script på klientsiden har denne mulighed. Nedenfor er beskrevet en af mulighederne for at opnå koordinaterne til markøren ved hjælp af dette sprogs muligheder.
Instruktioner
Trin 1
Brug egenskaberne for hændelsesobjektet til at hente de aktuelle koordinater for markøren. Dette objekt har et helt sæt egenskaber, der er relevante for bestemmelse af musemarkørens koordinater. LayerX-egenskaben indeholder afstanden målt i pixels fra venstre kant af det aktuelle lag og LayerY - den samme afstand fra dens øverste kant. Disse to egenskaber har synonymer - i stedet for event. LayerX kan du skrive event.x, og i stedet for event. LayerY kan du skrive event.y. SideX- og pageY-egenskaberne holder markørens vandrette og lodrette koordinater i forhold til den øverste venstre kant af browservinduet, og egenskaberne screenX og screenY har lignende værdier i forhold til skærmbilledet.
Trin 2
Føj browsertypekontrol til din kode og brug clientX- og clientY-egenskaberne ud over ovenstående egenskaber på begivenhedsobjektet. Dette er nødvendigt, fordi Microsoft bruger en anden egenskabsbetegnelse i sin Internet Explorer-browser. Du kan kombinere begge tilgange til bestemmelse af koordinater, for eksempel på denne måde:
hvis (evevnt.pageX || evevnt.pageY) {
koordinatX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
ellers hvis (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Trin 3
Placer koordinatdefinitionskoden i en brugerdefineret funktion. For eksempel:
funktion GetMouse (evevnt) {
var koordinatX = 0, koordinatY = 0;
hvis (! evevnt) evevnt = window.event;
hvis (evevnt.pageX || evevnt.pageY) {
koordinatX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
ellers hvis (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
returner {"coordX": coordinateX, "coordY": coordinateY};
}
Denne funktion returnerer en matrix med to navngivne elementer, hvoraf den første (med coordX-tasten) indeholder X-koordinaten, og den anden (coordY) indeholder Y-koordinaten.
Trin 4
Kald denne funktion til en eller anden begivenhed - for eksempel på musens bevægelsesbegivenhed (onmousemove) i dokumentkonteksten. Eksemplet nedenfor bruger en funktion til at sende musekoordinaterne til statuslinjen:
document.onmousemove = funktion (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "koord X:" + CurCoord.coordX + "px, koord Y:" + CurCoord.coordY + "px";};
