jQuery 元素坐标

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 .