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);
});