Calcolare le coordinate del mouse all'interno di un elemento con jQuery richiede l'uso dell'evento mousemove
unito ad una semplice sottrazione tra le coordinate assolute del mouse e le coordinate relative dell'elemento in questione.
La soluzione è la seguente:
$('#test').on('mousemove', function(event) {
var top = event.clientY - $(this).offset().top;
var left = event.clientX - $(this).offset().left;
$('#coords').text('X: ' + left + ' Y:' + top);
});
Le coordinate del mouse sono date dalla sottrazione tra i valori delle proprietà clientX
e clientY
dell'oggetto event
e le proprietà left
e top
del metodo .offset()
.