使用jQuery获取图像上鼠标单击的X/Y坐标

Question

我想使用jQuery获取图片上的点击事件的X/Y坐标。这些坐标应该是相对于图像本身而不是整个页面的。

- Ron Harlev

---

这3个链接提供了很好的答案：https://dev59.com/cG855IYBdhLWcg3wm1m3#4249711/、https://dev59.com/l3A75IYBdhLWcg3wi5sr#3236129/和https://dev59.com/w3A75IYBdhLWcg3wi5sr#10429969/。 - user

Answer 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方法。

- Brian McKenna

---

当你滚动页面时，它仍然无法正常工作，会产生不同的结果。 - beerwin

这正是我一直在寻找的，但我花了一些时间才能用言语表达出来。 - Josh

如@beerwin所提到的，当滚动页面时，这种方法不起作用。如果您需要基于页面而不是可视窗口的坐标，请改用e.pageX和e.pageY。 - Josh

没错！在大多数情况下，e.pageX和e.pageY就是你想要的。 - NetWave

抱歉 @BrianMcKenna，我不想获取位置，我想直接点击 <canvas> 标签的位置。如何做到这一点？ - Ave

Answer 2

注意！e.clientX和e.clientY与e.pageX和e.pageY之间有区别。

请尝试两者并确保使用正确的一个。 clientX和clientY会根据滚动位置而改变。

- Adam

Answer 3

这是一个更好的脚本:

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

});

- rckehoe

---

肯定比所选的更好。 - Mangirdas Skripka

简单而有效。谢谢！ - MegamanEXE

为什么这样更好？有人能给出一些建设性的理由吗？ - Kerwin Sneijders

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

这个代码片段是一个jQuery函数，可以帮助你在鼠标移动时获取鼠标指针的X和Y坐标位置。这对于跟踪用户在页面上的交互非常有用，特别是当你需要知道他们点击了哪里或者他们正在指向哪些元素时。

- itsazzad

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

- Troy Alford

---

我的解决方案也需要更新以反映pageX和pageY - 只是注意到上面的评论。当滚动时，这将无法正常工作 - 但已经有一个被接受的答案。 :) - Troy Alford