mousemove over element - 获取精确的鼠标位置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 如果您未获得所需结果，请尝试使用.position()代替.offset()