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

Question

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

Answer 1

Vous pouvez utiliser clientX et clientY pour obtenir la position de la souris dans la fenêtre. Vous pouvez également utiliser du jQuery offset pour obtenir la position d'un élément.

Donc, il devrait être clientX - offset.left ce qui concerne la distance à partir de la gauche de l'image, clientY - offset.top de la distance entre le haut de l'image.

Voici un exemple:

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

J'ai fait un exemple vivant ici et ici est la source.

Pour calculer la distance à partir de la droite ou en bas, vous auriez à utiliser jQuery width et height méthodes.

Answer 2

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. clientX et clientY changement basé sur la position de défilement

Answer 3

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);

});
 

Answer 4

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-tricks.com/snippets/jquery/get-xy-mouse-coordinates/

Answer 5

Jetez un oeil à http://jsfiddle.net/TroyAlford/ZZEk8/ pour un exemple de travail de la ci-dessous:

<img id='myImg' src='/my/img/link.gif' />

<script type="text/javascript">
    $(document).bind('click', function () {
        // Add a click-handler to the image.
        $('#myImg').bind('click', function (ev) {
            var $img = $(ev.target);

            var offset = $img.offset();
            var x = ev.clientX - offset.left;
            var y = ev.clientY - offset.top;

            alert('clicked at x: ' + x + ', y: ' + y);
        });
    });
</script>

Remarque que ci-dessus, vous obtiendrez le x et le y par rapport à l'image de la boîte, mais ne sera pas correctement prendre en compte la marge, bordure et remplissage. Ces éléments ne sont pas réellement partie de l'image, dans votre cas, mais ils peuvent faire partie de l'élément que vous voulez prendre en compte.

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

Votre nouveau code pourrait ressembler à:

<img id='myImg' src='/my/img/link.gif' />

<script type="text/javascript">
    $(document).bind('click', function () {
        // Add a click-handler to the image.
        $('#myImg').bind('click', function (ev) {
            var $img = $(ev.target);

            var offset = $img.offset(); // Offset from the corner of the page.
            var xMargin = ($img.outerWidth() - $img.width()) / 2;
            var yMargin = ($img.outerHeight() - $img.height()) / 2;
            // Note that the above calculations assume your left margin is 
            // equal to your right margin, top to bottom, etc. and the same 
            // for borders.

            var x = (ev.clientX + xMargin) - offset.left;
            var y = (ev.clientY + yMargin) - offset.top;

            alert('clicked at x: ' + x + ', y: ' + y);
        });
    });
</script>