Javascript: il movimento del mouse

In questa “prima puntanta” vediamo come catturare il movimento del mouse.

Il comando per attivare l’evento è il seguente:

document.onmousemove=NomeFunzione

dove NomeFunzione è la procedura che verrà attivata ogni volta che sposteremo il mouse.

questo comando può essere inserito con uno dei seguenti metodi:

1. dentro un link
   <a href=”#” onclick=”document.onmousemove = NomeFunzione; return false;”>[attiva]</a>
2. dentro un pulsante
   <inpute type=”button” onclick=”document.onmousemove = NomeFunzion” value=”attiva”> )
3. dentro uno il tag script
   <script type=”text/javascript”>document.onmousemove = NomeFunzione</script>

Il contenuto della nostra procedura ( che ho deciso di chiamare “on_MouseMove” ) dovrà catturare le coordinate del mouse ( clientX e clientY )

<br /> 1. function on_MouseMove(e) {<br /> 2. // compatibilità crossbrowser<br /> 3. // se (e) è null ( quindi IE ) lo imposto con window.event<br /> 4. if (!e) var e = window.event;<br /> 5. // scrivo dentro l’elemento con ID advisor le coordinate del mouse<br /> 6. document.getElementById(“advisor”).innerHTML = “x: ” + e.clientX + ” | y: ” + e.clientY<br /> 7. return false;<br /> 8. }

Analizziamo adesso il codice javascript dell’esempio.
La riga 1. dichiara semplicemente la funzione on_mouse_move specificado anche un parametro (e)
Le riche 2. e 3. sono semplicemte dei commenti
La riga 4 utilizza un comando che possiamo quasi definere standard ( if (!e) var e = window.event; ) che gestisce la compatibilità multi-browser per la cattura degli eventi.
In pratica IE necessità l’assagnazione “window.event” mentre per gli altri browser è sufficente dichiararla con un paramentro (nell’esempio “e”)
la riga 5. è un altro commento, mentre la 6. si occupa di aggiornare ( ad ogni movimento ) il contenuto dell’elemento advisor con le attuali coodinate del mouse.

Ho dato per scontato la presenza dell’elemento “advisor” nesessario per visualizzare in “tempo reale” lo spostamento.

Se volessimo interrompere la cattura dai movimenti è necessario impostare:

document.onmousemove = null

Ho preparato un esempio che spero possa aiutarvi a comprendere meglio quanto scritto

Se vi siete l’introduzione la trovate qui: Drag and Drop con Javascript

Ultima revisione: 27.11.2005