ZANETTE
MARCO
JAVASCRIPT SCRIPT
Calcolo posizione mouse in javascript
In questo breve articolo vi presenterò una semplice funzione javascript che permette di
calcolare la posizione del mouse
all'interno di un preciso elmento della vostra pagina html.
Nell'esempio qui sotto utilizzerò un div su cui ogni volta che verrà effettuato un click verrà mostrata la posizione
del mouse (coordinate x e y in pixel) all'interno di esso.
- function posizioneMouse(event,obj){
- var scrollTOP = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
- var scrollLEFT = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
- if(window.event){
- var allX = window.event.clientX+scrollLEFT;
- var allY = window.event.clientY+scrollTOP;
- } else {
- var allX = event.clientX+scrollLEFT;
- var allY = event.clientY+scrollTOP;
- }
- var elParent = obj;
- var objX = 0;
- var objY = 0;
- while (elParent){
- objX += elParent.offsetLeft;
- objY += elParent.offsetTop;
- elParent = elParent.offsetParent;
- }
- var x = allX-objX;
- var y = allY-objY;
- alert("Coordinata x:"+x+"px, coordinata y:"+y+"px");
- }
- <div style="width:200px; height:200px; background-color:#0FF;" onclick="posizioneMouse(event,document.getElementById('test'));"></div>
Come avete visto attraverso poche righe di codice, è possibile costruire una funzione javascript che
permetta di ricavare la posizione del mouse all'interno di un specifico oggetto presente all'interno
di una pagina html.
La funzione posizioneMouse necessita di 2 parametri: il primo l'oggetto event che sarà utilizzato per ricavare la posizione del mouse,
il secondo è l'oggetto in cui vogliamo calcolare la posizione del mouse.