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

Question

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

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方法.

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-xy-mouse-coordinates/