Получение координат X/Y щелчка мыши по изображению с помощью jQuery

Ответ 1

Вы можете использовать pageX и pageY, чтобы получить положение мыши в окне. Вы также можете использовать jQuery offset, чтобы получить позицию элемента.

Итак, это должно быть pageX - offset.left для того, насколько далеко от левого изображения и pageY - offset.top от того, насколько далеко от вершины изображения.

Вот пример:

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

Я сделал живой пример здесь и здесь является источником.

Чтобы вычислить, как далеко внизу или вправо, вам нужно будет использовать jQuery width и height.

Ответ 2

Внимание! существует разница между e.clientX и e.clientY и e.pageX и e.pageY

попробуйте оба и убедитесь, что вы используете правильный. clientX и clientY изменить в зависимости от положения прокрутки

Ответ 3

Вот лучший 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);

});

Ответ 4

Приведенный ниже код работает всегда, даже если любое изображение делает прокрутку окна.

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

    });
});

Ссылка: http://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/

Ответ 5

Посмотрите http://jsfiddle.net/TroyAlford/ZZEk8/ для рабочего примера ниже:

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

Обратите внимание, что вышесказанное даст вам x и y относительно поля изображения - но неправильно учитывает маржу, границу и дополнение. Эти элементы на самом деле не являются частью изображения, в вашем случае - но они могут быть частью элемента, который вы хотите принять во внимание.

В этом случае вы также должны использовать $div.outerWidth(true) - $div.width() и $div.outerHeight(true) - $div.height() для вычисления суммы поля/границы и т.д.

Ваш новый код может выглядеть по-другому:

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

Ответ 6

Попробовал отредактировать принятый ответ выше, но stackoverflow в настоящий момент кажется неисправным.

Не забудьте границу! Ширина границы элемента, который вы нажимаете, повлияет на смещение, поэтому ваш ответ также будет затронут. Граница шириной 5 пикселей означает, что вам нужно будет добавить 5 пикселей к вашим значениям x и y, чтобы они были фактическими значениями X и Y внутри элемента. По крайней мере, в Firefox 13 это так.