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

JavaScript coordinates showing as greater than the image width and height

本文关键字：高度 图像 坐标 显示 大于 JavaScript      更新时间：2023-09-26

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

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

如有任何帮助，我们将不胜感激。

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

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

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

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);
相关文章：