Déterminer le décalage gauche d'un clic à l'aide de jQuery

Question

Imaginons que vous ayez une image de 200 pixels de large. Est-il possible de déterminer à quelle distance de la gauche de l'image vous avez cliqué? Par exemple, si vous cliquiez sur le point mort, vous obtiendriez 100. J'ai essayé d'utiliser quelque chose comme ui.position.left mais je n'ai pas réussi à le faire fonctionner. Des idées?

Answer 1

D'abord, obtenez la position X de l'image. Ensuite, utilisez les informations sur l'événement pour obtenir la position X de l'événement click.

Une fois que vous avez ces deux, il est simple de math pour obtenir le résultat:

$('#yourImg').click(function(e){ 
    var imageLeft = $(this).offset().left; 
    var clickLeft = e.pageX; 
    var howFarFromLeft = clickLeft - imageLeft; 
}); 

Answer 2

Vous devez trouver coordonnées de la souris au moment du clic (en utilisant l'événement du clic, event.pageX, event.pageY). Ensuite, trouvez l'emplacement de l'image dans le corps. et soustraire de la MousePosition ..

Le résultat serait les coordonnées à l'intérieur de l'image .. Demo