代码之家 › 专栏 › 技术社区 › spacemonkeys

jQuery元素坐标

mouseevent jquery

spacemonkeys · 技术社区 · 14 年前

我有以下代码

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

3 回复 | 直到 14 年前

lonesomeday 14 年前

据我所知,以下代码有效:

$('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 .

T.J. Crowder 14 年前

你不想 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