ottenere le coordinate X / Y di un clic del mouse su un’immagine con jQuery

Vorrei usare jQuery per ottenere le coordinate X / Y di un evento click su un’immagine. Le coordinate devono essere relative all’immagine, non relative all’intera pagina

È ansible utilizzare la pagina pageX e la pagina pageY per ottenere la posizione del mouse nella finestra. Puoi anche usare l’ offset di jQuery per ottenere la posizione di un elemento.

Quindi, dovrebbe essere pageX - offset.left per quanto lontano dalla sinistra dell’immagine e pageY - offset.top per quanto lontano dalla parte superiore dell’immagine.

Ecco un esempio:

 $(document).ready(function() { $('img').click(function(e) { var offset = $(this).offset(); alert(e.pageX - offset.left); alert(e.pageY - offset.top); }); }); 

Ho fatto un esempio dal vivo qui e qui è la fonte.

Per calcolare quanto lontano dalla parte inferiore o destra, dovresti utilizzare i metodi di width e height di jQuery.

Nota! c’è una differenza tra e.clientX e e.clientY e e.pageX e e.pageY

provali entrambi e assicurati di utilizzare quello giusto. clientX e clientY cambiano in base alla posizione di scorrimento

Ecco uno script migliore:

 $('#mainimage').click(function(e) { var offset_t = $(this).offset().top - $(window).scrollTop(); var offset_l = $(this).offset().left - $(window).scrollLeft(); var left = Math.round( (e.clientX - offset_l) ); var top = Math.round( (e.clientY - offset_t) ); alert("Left: " + left + " Top: " + top); }); 

Il codice seguente funziona sempre anche se qualsiasi immagine fa scorrere la finestra.

 $(function() { $("#demo-box").click(function(e) { var offset = $(this).offset(); var relativeX = (e.pageX - offset.left); var relativeY = (e.pageY - offset.top); alert("X: " + relativeX + " Y: " + relativeY); }); }); 

Rif: http://css-tricks.com/snippets/jquery/get-xy-mouse-coordinates/

Dai un’occhiata a http://jsfiddle.net/TroyAlford/ZZEk8/ per un esempio funzionante di seguito:

   

Nota che quanto sopra ti porterà la x e la y rispetto alla casella dell’immagine, ma non prenderà correttamente in considerazione margine, bordo e riempimento. Questi elementi non sono in realtà parte dell’immagine, nel tuo caso, ma potrebbero far parte dell’elemento che vorresti tenere in considerazione.

In questo caso, dovresti utilizzare anche $div.outerWidth(true) - $div.width() e $div.outerHeight(true) - $div.height() per calcolare la quantità di margine / bordo / ecc.

Il tuo nuovo codice potrebbe essere più simile a: