jQuery元素坐标

我有以下代码

 $(document).ready(function(){
        $('img').mousedown(function(event) {
            $('p').text('Mouse Clicked x =' + event.screenX + ' Y = ' + event.screenY);
        });
    });

---

如果他们点击图像，它会很好地找到光标的屏幕坐标，但我真正想要的是他们点击的图像内的坐标（左上角为1,1，与图像在页面中的位置无关），但除了将图像放在自己的页面中并使用pageX/pageY外，我看不到其他方法。。。还是我看错了

您是否尝试过从您的数字中减去图像（及其父对象）的

offsetLeft

和

offsetTop

---

您可能需要

通过
offsetParents
在
过程中获得所有
偏移量
s.
以下代码就我所知是有效的：

$('img').mousedown(function(e) {
    var offset = $(this).offset(),
        imgLeft = e.pageX - offset.left,
        imgTop = e.pageY - offset.top;

    $('p').text('Mouse clicked x = ' + imgLeft + ' Y = ' + imgTop);
});

.
你不想要
screenX
和
screenY
，你想要和。然后，您可以轻松减去图像的位置（通过检索），以确定在图像中单击的位置：

$('img').click(function(event) {
  var imgPos;

  imgPos = $(this).offset();
  display('Mouse click at ' + event.pageX + 'x' + event.pageY);
  display('Image at ' + imgPos.left + 'x' + imgPos.top);
  display(
    'Delta within image: ' +
    (event.pageX - imgPos.left) +
    'x' +
    (event.pageY - imgPos.top)
  );
});

function display(msg) {
  $("<p/>").html(msg).appendTo(document.body);
}

$（'img'）。单击（函数（事件）{
var-imgPos；
imgPos=$（this.offset（）；
显示（'鼠标点击'+event.pageX+'x'+event.pageY）；
显示（'+imgPos.left+'x'+imgPos.top处的图像）；
展示(
'图像中的增量：'+
（event.pageX-imgPos.left）+
“x”+
（event.pageY-imgPos.top）
);
});
功能显示（msg）{
$（“
”）html（msg.appendTo（document.body）；
}

找到图像的装箱坐标，然后从图像中减去鼠标坐标。this.offsetTop和left都包含0，其中screenX/Y包含17和230，因此它似乎不匹配尝试
this.offsetParent.offsetop
。父元素也有一个
偏移
。这就是我在
中所说的，
-你可能必须循环遍历它们，并将它们的偏移量相加，以获得图像的真实偏移量。这是一个通用JavaScript答案，但正如他所说的，他正在使用jQuery，他可以依靠jQuery为他处理所有这些内容。