obtenir les coordonnées X / Y d’un clic de souris sur une image avec jQuery

Je voudrais utiliser jQuery pour obtenir les coordonnées X / Y d’un événement de clic sur une image. Les coordonnées doivent être relatives à l’image et non à la page entière

Vous pouvez utiliser pageX et pageY pour obtenir la position de la souris dans la fenêtre. Vous pouvez également utiliser le offset de jQuery pour obtenir la position d’un élément.

Donc, ce devrait être pageX - offset.left pour savoir à quelle distance de la gauche de l’image et pageY - offset.top pour quelle distance du haut de l’image.

Voici un exemple:

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

J’ai fait un exemple en direct ici et voici la source.

Pour calculer la distance entre le bas et la droite, vous devez utiliser les méthodes de width et de height de jQuery.

Remarque! il y a une différence entre e.clientX & e.clientY et e.pageX et e.pageY

essayez-les tous les deux et assurez-vous que vous utilisez le bon. changement clientX et clientY fonction de la position de défilement

Voici un meilleur script:

 $('#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); }); 

Le code ci-dessous fonctionne toujours même si une image fait défiler la fenêtre.

 $(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); }); }); 

Réf: http://css-sortingcks.com/snippets/jquery/get-xy-mouse-coordinates/

Jetez un oeil à http://jsfiddle.net/TroyAlford/ZZEk8/ pour un exemple de travail des éléments suivants:

   

Notez que ce qui précède vous donnera le x et le y par rapport à la boîte de l’image – mais ne prendra pas correctement en compte la marge, la bordure et le remplissage. Ces éléments ne font pas réellement partie de l’image, dans votre cas, mais ils peuvent faire partie de l’élément que vous souhaitez prendre en compte.

Dans ce cas, vous devriez également utiliser $div.outerWidth(true) - $div.width() et $div.outerHeight(true) - $div.height() pour calculer le montant de marge / bordure / etc.

Votre nouveau code pourrait ressembler davantage à: