Om bepaalde acties te programmeren als reactie op de beweging van de cursor in het browservenster, is het soms nodig om de coördinaten ervan te bepalen. Dit kan worden gedaan door een script dat de mogelijkheid heeft om gebeurtenissen in de browser te volgen. Een JavaScript-script aan de clientzijde heeft deze mogelijkheid. Hieronder wordt een van de opties beschreven voor het verkrijgen van de coördinaten van de cursor met behulp van de mogelijkheden van deze taal.
instructies:
Stap 1
Gebruik de eigenschappen van het gebeurtenisobject om de huidige coördinaten van de cursor te krijgen. Dit object heeft een hele reeks eigenschappen die relevant zijn voor het bepalen van de coördinaten van de muiscursor. De eigenschap LayerX bevat de afstand gemeten in pixels vanaf de linkerrand van de huidige laag en LayerY - dezelfde afstand vanaf de bovenrand. Deze twee eigenschappen hebben synoniemen - in plaats van event. LayerX kunt u event.x schrijven en in plaats van event. LayerY kunt u event.y schrijven. De eigenschappen pageX en pageY bevatten de horizontale en verticale coördinaten van de cursor ten opzichte van de linkerbovenrand van het browservenster, en de eigenschappen screenX en screenY hebben vergelijkbare waarden ten opzichte van het beeldscherm.
Stap 2
Voeg controle van het browsertype toe aan uw code en gebruik de eigenschappen clientX en clientY naast de bovenstaande eigenschappen voor het gebeurtenisobject. Dit is nodig omdat Microsoft een andere eigenschapsaanduiding gebruikt in zijn Internet Explorer-browser. U kunt beide benaderingen voor het bepalen van coördinaten combineren, bijvoorbeeld als volgt:
if (even.paginaX || even.paginaY) {
coördinaatX = elke.paginaX;
coördinaatY = elke.paginaY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Stap 3
Plaats de coördinaatdefinitiecode in een aangepaste functie. Bijvoorbeeld:
functie GetMouse (eventueel) {
var coördinaatX = 0, coördinaatY = 0;
if (! evevnt) evevnt = venster.event;
if (even.paginaX || even.paginaY) {
coördinaatX = elke.paginaX;
coördinaatY = elke.paginaY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": coordinateX, "coordY": coordinateY};
}
Deze functie retourneert een array van twee benoemde elementen, waarvan de eerste (met de coordX-toets) de X-coördinaat bevat en de tweede (coordY) de Y-coördinaat.
Stap 4
Roep deze functie aan bij een gebeurtenis, bijvoorbeeld bij de muisbewegingsgebeurtenis (onmousemove) in de documentcontext. In het onderstaande voorbeeld wordt een functie gebruikt om de muiscoördinaten naar de statusbalk uit te voeren:
document.onmousemove = functie (evt.) {var CurCoord = GetMouse (evt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
