Come ottenere la posizione corrente del mouse in Javascript / Myclads.com

Come ottenere la posizione corrente del mouse in Javascript

May 3

Quando i visitatori del sito si muovono i loro cursori del mouse, è possibile tenere traccia quei movimenti utilizzando JavaScript. Una volta che conosci le coordinate X e Y del cursore dell'utente, è possibile programmare l'applicazione per interagire con il mouse. Creare percorsi cursore che seguono il cursore, animare oggetti sullo schermo o anche scrivere i giochi che interagiscono con il mouse di un utente. Per catturare i movimenti del mouse su una pagina Web, collegare un gestore di eventi al documento, e aggiungere un po 'di JavaScript alla vostra pagina.

istruzione

1 Aprire qualsiasi documento HTML e aggiungere questo codice alla sua sezione <body>:

La proprietà onMouseMove crea un evento che si attiva quando si sposta il mouse sopra il corpo di una pagina Web. Quando l'evento, si chiama la funzione di nome getCoordinates JavaScript. La seconda riga di codice crea un controllo textarea che visualizza le posizioni del mouse mentre si sposta il mouse.

2 Aggiungere questa funzione JavaScript alla sezione <head> del documento:

getCoordinates funzione (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;

}

altro {

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

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

}

var coordina =

"ScreenX =" + screenX + ".. screenY =" + screenY +

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

".. PageX =" + pageX + ".. Pagey =" + Pagey;

var textArea = document.getElementById ( "TextArea1");

textArea.value = coordinate;

} </ Script>

Questa funzione esamina l ' "evento" passato a quando si verifica il movimento del mouse. La funzione quindi memorizza i valori clientX, clientY, pageX, Pagey, e screenX e Screeny della manifestazione in sei variabili. Le ultime due righe di visualizzazione del codice quei valori nella textarea come si sposta il mouse.

3 Salvare il documento HTML e aprirlo in un browser. Quando si sposta il mouse all'interno della pagina Web, viene visualizzata la posizione del puntatore.

Consigli e avvertenze

Si noti che la funzione JavaScript cattura coordinate X e Y per tre tipi di proprietà: cliente, pagina e schermo. ClientX e clientY, per esempio, tenere la posizione del mouse rispetto all'area client del browser. ScreenX e screenY mostrano la posizione relativa al l'intero schermo. Il valore pageX è uguale al valore clientX più qualsiasi compensato che si verifica quando un utente scorre verso sinistra o verso destra. Il valore Pagey è uguale al valore clientY più qualsiasi compensato che si verifica quando un utente scorre su o giù. Questi valori di "pagine" sono utili per rilevare la posizione del mouse rispetto al bordo superiore sinistro della pagina Web effettiva, indipendentemente da quanto l'utente scorre orizzontalmente o verticalmente.