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

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

2 个答案: