Javascript 鼠标移动到元素上-获得精确的鼠标位置X Y

我创建表，处理程序连接鼠标移动。 但在左上角我得到了。offsetX。offsetY等于-5-5。 为什么？我需要0\0

<table cellpadding="0" 
       id="target" 
       cellspacing="0"
       width="602" 
       height="500"  
       style="float:left;
              position:relative;
              background: url(/content/games/kamikaze2/back.jpg) no-repeat 0 0;">
    <tbody>...
</tbody>
</table>

<script type="text/javascript">

    $("#target").mousemove(function (event) {
        var msg = "Handler for .mousemove() called at ";
        msg += event.offsetX + ", " + event.offsetY;
        $("#log").append("<div>" + msg + "</div>");
    });
</script>

...
$（“#目标”）.mousemove（函数（事件）{
var msg=“在处调用的.mousemove（）的处理程序”；
msg+=event.offsetX+”，“+event.offsetY；
$（“#log”）.append（“+msg+”）；
});

获取元素内鼠标坐标的最准确方法是计算

• ，及

const getMousePos=（evt）=>{
const pos=evt.currentTarget.getBoundingClientRect（）；
返回{
x:evt.clientX-位置左侧，
y:evt.clientY-位置顶部
};
};
document.querySelector（“#target”）.addEventListener（'mousemove'，（evt）=>{
常量mPos=getMousePos（evt）；
evt.currentTarget.textContent=`鼠标位置x:${mPos.x}y:${mPos.y}`；
});
#目标{
位置：绝对位置；
左：50px；
顶部：20px；
宽度：200px；
高度：100px；
背景：#0bf；
transform:translate（20px，30px）；/*与translate连用*/
}

add
margin:0px；填充：0px
到表格样式，然后重试。否，我得到200\300。但是我需要得到0\0我得到0，我觉得很好+1如果在较大的页面上向下或向右滚动，则返回负值。