firefox下鼠标位置问题，如何实现offsetX
页面下面有多个table，我想得到鼠标在其中一个table中移动时的坐标，是相对这个table内部的坐标，并且考虑滚动条的因素
ie下实现很简单，直接用event.offsetX和event.offsetY即可。
但是在firefox一直没有成功，网上的方法很多，比较公认的方法为：
posx=event.clientX+document.body.scrollLeft-document.body.clientLeft;
posy=event.clientY+document.body.scrollTop-document.body.clientTop;
但我一直没有得到正确结果，并且发现document.body.clientLeft与document.body.clientTop总是返回0，请帮我看下吧
一直调不通，心急如焚，谢谢
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getTablePosition(id){
var table=document.getElementById(id);
var style="";
if(document.defaultView&&document.defaultView.getComputedStyle){
style=document.defaultView.getComputedStyle(table);
}else{
style=table.currentStyle;
}
return{
'x':style.left=='auto'?table.offsetLeft:style.left,
'y':style.top=='auto'?table.offsetTop:style.top
}
}
function getMousePosition(e){
var a=e
[解决办法]
window.event;
var x=a.pageX
[解决办法]
(a.clientX+(document.documentElement.scrollLeft
[解决办法]
document.body.scrollLeft));
var y=a.pageY
[解决办法]
(a.clientY+(document.documentElement.scrollTop
[解决办法]
document.body.scrollTop));
return{
'x':x,
'y':y
}
}
function init(){
var table=document.getElementById("test");
table.onmousemove=function(e){
var tablePosition=getTablePosition("test");
var mousePosition=getMousePosition(e);
var x=parseInt(mousePosition.x)-parseInt(tablePosition.x);
var y=parseInt(mousePosition.y)-parseInt(tablePosition.y);
document.getElementsByTagName("div")[0].innerHTML=x+":"+y;
}
}
window.onload=init;
</script>
</head>
<body>
<div></div>
<table id="test" cellspacing="0" border="1">
<tr>
<th>id</th>
<th>name</th>
<th>score</th>
<th>comment</th>
</tr>
<tr>
<td>1</td>
<td>zzg</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>lx</td>
<td>70</td>
<td>B</td>
</tr>
<tr>
<td>3</td>
<td>cj</td>
<td>90</td>
<td>M</td>
</tr>
<tr>
<td>4</td>
<td>wjx</td>
<td>80</td>
<td>A</td>
</tr>
<tr>
<td>5</td>
<td>hsl</td>
<td>90</td>
<td>G</td>
</tr>
</table>
</body>
</html>
这样试试
[解决办法]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('_table').onmousemove = function(e){
e = e
[解决办法]
event;
alert(e.clientX + ' ' + e.clientY );
}
}
</script>
</head>
<body>
<table id="_table" border="1" width="100%">
<tr>
<td>1212</td>
<td>1212</td>
<td>1212</td>
</tr><tr>
<td>1212</td>
<td>1212</td>
<td>1212</td>
</tr><tr>
<td>1212</td>
<td>1212</td>
<td>1212</td>
</tr><tr>
<td>1212</td>
<td>1212</td>
<td>1212</td>
</tr>
</table>
</body>
</html>
