För att programmera några åtgärder som svar på markörens rörelse i webbläsarfönstret är det ibland nödvändigt att bestämma dess koordinater. Detta kan göras med ett skript som har möjlighet att spåra händelser som inträffar i webbläsaren. Ett JavaScript-skript på klientsidan har denna funktion. Nedan beskrivs ett av alternativen för att erhålla markörens koordinater med hjälp av detta språk.
Instruktioner
Steg 1
Använd händelseobjektets egenskaper för att få markörens aktuella koordinater. Detta objekt har en hel uppsättning egenskaper som är relevanta för att bestämma koordinaterna för muspekaren. Egenskapen LayerX innehåller avståndet i pixlar från det aktuella lagrets vänstra kant och LayerY - samma avstånd från dess övre kant. Dessa två egenskaper har synonymer - istället för event. LayerX kan du skriva event.x och istället för event. LayerY kan du skriva event.y. Egenskaperna pageX och pageY innehåller markörens horisontella och vertikala koordinater i förhållande till webbläsarfönstrets övre vänstra kant, och egenskaperna screenX och screenY har liknande värden i förhållande till skärmen.
Steg 2
Lägg till webbläsartypskontroll i din kod och använd egenskaperna clientX och clientY förutom egenskaperna ovan i händelseobjektet. Detta är nödvändigt eftersom Microsoft använder en annan fastighetsbeteckning i sin Internet Explorer-webbläsare. Du kan kombinera båda metoderna för att bestämma koordinater, till exempel så här:
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
annars om (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;
}
Steg 3
Placera koordinatdefinitionskoden i en anpassad funktion. Till exempel:
funktion GetMouse (evevnt) {
var koordinatX = 0, koordinatY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
annars om (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;
}
returnera {"coordX": coordinateX, "coordY": coordinateY};
}
Den här funktionen returnerar en matris med två namngivna element, av vilka den första (med koordX-tangenten) innehåller X-koordinaten och den andra (coordY) innehåller Y-koordinaten.
Steg 4
Anropa den här funktionen vid någon händelse - till exempel vid musen flytta händelse (onmousemove) i dokumentets sammanhang. Exemplet nedan använder en funktion för att mata ut muskoordinaterna till statusfältet:
document.onmousemove = funktion (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "koord X:" + CurCoord.coordX + "px, koord Y:" + CurCoord.coordY + "px";};
