Home » Web Development » jQuery » Rilevare le coordinate del mouse relative ad un contenitore

Rilevare le coordinate del mouse relative ad un contenitore

coordinate click

Quando si lavora con degli eventi javascript spesso ci capita di avere bisogno di sapere le coordinate del mouse al momento del click. Può capitare, per esempio, di voler sapere al click su un div le coordinate dell’evento. In questo caso ci viene in aiuto javascript unito a jQuery

Istanziamo un handler per il click su tutti gli elementi div:

1
2
3
$("div").click(function(event){
 alert("coordinata x: " + event.pageX + " - coordinata y: " + event.pageY);
});

In questo esempio abbiamo stampato un messaggio con le nostre coordinate, per cui se ad esempio avessimo cliccato alle coordinate 50;30 il messaggio sarebbe: “coordinata x: 50 – coordinata y: 30”.

Le coordinate che abbiamo stampato nell’esempio sono le coordinate “globali” della pagina. Potremmo però avere bisogno di sapere le coordinate “relative” ad un box contenitore che abbiamo in pagina. In questo esempio ci viene in aiuto jQuery, con la funzione .offset();.
Andiamo quindi a modificare il nostro handler per stampare anche queste informazioni

1
2
3
4
5
6
7
$("div").click(function(event){
 var divOffset = $(this).offset();
 var relativeX = (event.pageX - divOffset.left);
 var relativeY = (event.pageY - divOffset.top);
 alert("coordinata globale x: " + event.pageX + " - coordinata globale y: " + event.pageY);
 alert("coordinata relativa x: " + relativeX + " - coordinata relativa y: " + relativeY);
});

Nel nuovo esempio andremo a stampare due messaggi, il primo con le coordinate “globali” del nostro click, mentre il secondo con le coordinate “relative”.

La funzione .offset() restituisce le coordinate dell’elemento puntato (o del primo elemento trovato in caso si usi un selettore multiplo) rispetto al DOM. In particolare le coordinate fanno riferimento alla distanza da sinistra e dall’alto dell’elemento. Da ricordare assolutamente che .offeset() non funziona con elementi nascosti.

Il risultato della funzione .offset() è un oggetto con proprietà left e top, come si può vedere nell’esempio. Una volta trovato l’offset del nostro contenitore basterà sottrare alla nostra coordinata x l’offset left e alla coordinata y l’offest top.

Tornando al nostro esempio, ipotizziamo come coordinate globali le solite 50;30, come offest left del div 23 e come offset top 14. Avremo come risultato due messaggi: “coordinata globali x: 50 – coordinata globali y: 30” e “coordinata relative x: 27 – coordinata relative y: 16”

Grazie a queste poche righe siamo riusciti a rilevare le coordinate del mouse relative ad un contenitore.

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...