mousemove over要素 - 正確なマウス位置を得るX Y

Question

私はテーブル、ハンドラをつけたmousemoveを作成します。 しかし、左上の点では、.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> 

Answer 1

LIVE DEMO

$("#target").mousemove(function (e) { 

     var pos = $(this).offset(); 
     var elPos = { X:pos.left , Y:pos.top }; 
     var mPos = { X:e.clientX-elPos.X, Y:e.clientY-elPos.Y }; 

     $("#log").text("Mouse position x:"+ mPos.X +" y:"+ mPos.Y); 

}); 

これは、あなたの要素の左上隅にマウスの位置0 0を与えるだろう。パディング; 0PX：表のスタイルに0px`し、再試行してください、あなたが希望する結果を得られない場合は
は、 `マージンを追加する代わりに.offset()