Per programmare alcune azioni in risposta al movimento del cursore nella finestra del browser, a volte è necessario determinarne le coordinate. Questo può essere fatto da uno script che ha la capacità di tenere traccia degli eventi che si verificano nel browser. Uno script JavaScript lato client ha questa capacità. Di seguito è descritta una delle opzioni per ottenere le coordinate del cursore utilizzando le capacità di questa lingua.
Istruzioni
Passo 1
Utilizzare le proprietà dell'oggetto evento per ottenere le coordinate correnti del cursore. Questo oggetto ha un intero insieme di proprietà che sono rilevanti per determinare le coordinate del cursore del mouse. La proprietà LayerX contiene la distanza misurata in pixel dal bordo sinistro del livello corrente e LayerY - la stessa distanza dal suo bordo superiore. Queste due proprietà hanno sinonimi: invece di event. LayerX, puoi scrivere event.x, e invece di event. LayerY, puoi scrivere event.y. Le proprietà pageX e pageY contengono le coordinate orizzontali e verticali del cursore rispetto al bordo superiore sinistro della finestra del browser e le proprietà screenX e screenY contengono valori simili rispetto allo schermo del monitor.
Passo 2
Aggiungi il controllo del tipo di browser al tuo codice e usa le proprietà clientX e clientY oltre alle proprietà precedenti sull'oggetto evento. Ciò è necessario perché Microsoft utilizza una designazione di proprietà diversa nel suo browser Internet Explorer. Puoi combinare entrambi gli approcci per determinare le coordinate, ad esempio, in questo modo:
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evento.paginaX;
coordinateY = evento.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;
}
Passaggio 3
Posiziona il codice di definizione delle coordinate in una funzione personalizzata. Per esempio:
function GetMouse (evento) {
var coordinateX = 0, coordinateY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evento.paginaX;
coordinateY = evento.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};
}
Questa funzione restituisce un array di due elementi denominati, il primo dei quali (con il tasto coordX) contiene la coordinata X e il secondo (coordY) contiene la coordinata Y.
Passaggio 4
Chiama questa funzione su alcuni eventi, ad esempio sull'evento di spostamento del mouse (onmousemove) nel contesto del documento. L'esempio seguente utilizza una funzione per inviare le coordinate del mouse alla barra di stato:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
