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