使用 jQuery 获取鼠标单击图像的 X/Y 坐标 [重复]

Question

我想使用 jQuery 来获取图像上单击事件的 X/Y 坐标。坐标应该是相对于图像的，而不是相对于整个页面的

Answer 1

您可以使用pageX and 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);
  });
});

我做了一个live example here，here 是来源。

要计算距底部或右侧的距离，您必须使用 jQuery 的 width 和 height 方法。

Answer 2

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

尝试它们并确保您使用的是正确的。 clientX 和 clientY 根据滚动位置变化

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

});

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/

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()来计算margin/border/等的数量。

您的新代码可能看起来更像：

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