Question

我有以下代码

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

如果点击图像，可以很好地找到光标的屏幕坐标，但我真正想要的是它们点击的图像中的坐标（左上角为1.1，无论图像位置如何）除了将图像放在自己的页面中并使用pageX / pageY ...或者我看着这个错误之外我无论如何都看不到这样做

Answer 1

以下代码可以告诉我：

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

See jsFiddle

Answer 2

您是否尝试从数字中减去图片（及其父母）的offsetLeft和offsetTop？

您可能需要while通过offsetParents获取所有offset。

Answer 3

您不希望screenX和screenY，想要pageX和pageY。然后，您可以轻松地减去图像的位置（通过offset检索）以确定图像中的点击位置：

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

Live example

jQuery元素坐标

3 个答案: