如何将鼠标event中的clientX转换为在当前控件中的坐标呢

Question

比如页面上有个table，里面有一格我放了个canvas,现在想实现的是，鼠标在canvas上移动时，根据位置不同，显示不同的内容。
但是onmousemove中返回的clientX是相对于浏览器的，而canvas相对浏览器的位置是不知道的（或者说是不固定的），那么，是否有办法可以将这个值转换为相对于canvas的值呢。
最好是通用解决，适合FF或者IE的，似乎IE下有个 X属性。

Answer 1

将td表格设置为relative，就可以通过e.offsetX,offsetY或者layerX，layerY获取到相对于td的坐标，而不是相对于视窗的了<table>
<tr><td style="width:100px">1<br />1<br />1<br />1<br />1<br /></td><td>123132</td></tr>
<tr><td></td><td style="position:relative"><canvas id="canvas" style="height:300px;width:400px;border:solid 1px #000" onmousemove="move(event)"></canvas></td></tr>
</table>
<script type="text/javascript">
    function move(e) {
        var x = e.offsetX || e.layerX;
        var y = e.offsetY || e.layerY;
        document.title = x + "|" + y
    }
</script>

Answer 2

e.clientX - e.target.offsetLeft
y坐标也这样写就可以了.

Answer 3

$Distance={//高度获取
offsetTop:function(target){
var newTop=target.offsetTop;
while(target=target.offsetParent){
newTop+=target.offsetTop;
}
return newTop;
},
offsetLeft:function(target){
var newLeft=target.offsetLeft;
while(target=target.offsetParent){
newLeft+=target.offsetLeft;
}
return newLeft;
}
}e.clientX - $Distance.offsetLeft(e.target)e.clientY - $Distance.offsetTop(e.target)