Quando i visitatori del sito spostano i cursori del mouse, è possibile rintracciare quei movimenti utilizzando JavaScript. Una volta che sai le coordinate X e Y del cursore dell'utente, è possibile programmare l'applicazione per interagire con il mouse. Creare sentieri di cursore che seguono il cursore, animano gli oggetti sullo schermo o anche scrivere giochi che interagiscono con il mouse di un utente. Per acquisire i movimenti del mouse in una pagina Web, associare un gestore eventi al documento e aggiungere un po ' di JavaScript nella tua pagina.

Istruzioni

1

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

< onmousemove="getCoordinates(event); il corpo" >

< textarea id = "TextArea1" rows = "5" cols = "80" >< / textarea >

La proprietà onmousemove crea un evento che viene attivato quando si sposta il mouse sopra il corpo di una pagina Web. Quando viene generato l'evento, chiama la funzione JavaScript denominata getCoordinates. 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 al documento < head > sezione:

< script type = "text/javascript" >

Function getCoordinates(event) () {

screenX var = event.screenX;

screenY var = event.screenY;

clientX var = event.clientX;

var clientY = event.clientY;

Se (event.pageX) {

pageX var = event.pagex;

Pareja var = event.pageY;

}

else {

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

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

}

Coordinate di var =

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

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

" .. pageX = "+ paginax +"... Pareja = "+ Parillo;

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

textArea.value = Coordinate;

} < / script >

Questa funzione analizza il "evento" passato ad esso quando si verifica il movimento del mouse. La funzione Archivia quindi l'evento clientX, clientY, pageX, Pascali e screenX e screenY valori in sei variabili. Le ultime due righe di codice visualizzare tali valori nel componente textarea come si sposta il mouse.

3

Salvare il documento HTML e aprirlo in un browser. Come si sposta il mouse intorno alla pagina Web, viene visualizzata la posizione del puntatore.

Consigli & Avvertenze

• Si noti che la funzione JavaScript acquisisce le coordinate X e Y per tre tipi di proprietà: client, pagina e schermo. ClientX e clientY, per esempio, tenere premuto il mouse la posizione di relativa all'area client del browser. ScreenX e screenY Visualizza la posizione rispetto allo schermo intero. Il valore di paginax è uguale il valore clientX più alcun offset che si verifica quando un utente scorre verso sinistra o verso destra. Il valore di Pascali è uguale il valore clientY più alcun offset che si verifica quando un utente scorre verso l'alto o verso il basso. Questi valori di "pagina" sono utili per rilevare la posizione del mouse rispetto alla parte superiore sinistra della pagina Web effettiva, indipendentemente da quanto l'utente scorre orizzontalmente o verticalmente.