jQuery: ottenere le coordinate del mouse all'interno di un box

Solitamente le coordinate del mouse vengono prese rispetto alla finestra del browser, ma jQuery ci permette di effettuare la stessa operazione anche all'interno dei box degli elementi. Vediamo come fare.

Per ottenere le coordinate esatte dobbiamo:

1. ottenere l'offset del box dell'elemento
2. per l'asse X dobbiamo sottrarre il valore della proprietà pageX dell'evento al valore della proprietà left dell'offset
3. per l'asse Y dobbiamo sottrarre il valore della proprietà pageY dell'evento al valore della proprietà top dell'offset

Ecco un esempio:

$(function() {
	$('#box').mouseover(function(e) {

  	var offset = $(this).offset();
  	var relativeX = (e.pageX - offset.left);
  	var relativeY = (e.pageY - offset.top);

  	console.log('X: ' + relativeX + '  Y: ' + relativeY);

	});
});

e è un riferimento all'oggetto event di JavaScript, in questo caso mouseover.