javascript - JavaScript 坐标显示为大于图像的宽度和高度

Question

我试图在将鼠标悬停在图像左上角的像素上时获取鼠标的位置。我目前正在使用 pageX 和 pageY 事件属性，但这返回的值大于图像本身的宽度和高度。

var getImgCoord = function(e) {
  var x = e.pageX,
      y = e.pageY;
  console.log(x + ' | ' + y);
}
$('.featuredImg').mousemove(function() {
  getImgCoord(event);
});

任何帮助将不胜感激。

Answer 1

pageX 和 pageY 是相对于文档左上角的坐标，而不是您的图像本身（名称已经说明）。

您需要从元素中减去偏移量：

$('.featuredImg').mousemove(function(e) {
  var x = e.pageX - $(this).offset().left,
      y = e.pageY - $(this).offset().top;
  console.log(x + ' | ' + y);
});

Answer 2

http://jsfiddle.net/D5uuA/

var getImgCoord = function(e) {
  var imageOffset = $(this).offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var x = e.pageX - imageOffset.left,
       y = e.pageY - imageOffset.top;
   console.log(x + ' | ' + y);
}
$('.featuredImg').mousemove(getImgCoord);