页面下面有多个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，请帮我看下吧一直调不通，心急如焚，谢谢
posy=event.clientY+document.body.scrollTop-document.body.clientTop; 但我一直没有得到正确结果，并且发现document.body.clientLeft与document.body.clientTop总是返回0，请帮我看下吧一直调不通，心急如焚，谢谢
<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>
谢谢，你的示例可用，但是我现在需要在table中放一个img，然后鼠标经过img的时候触发onmousemove再判断位置，核心要求就是在img的左上角实现（0,0），但用你的代码执行getTablePosition（）时，也只是得到img距离所在table的距离，而不是距离整个页面的距离，最终显示结果还是不对
这个不行我需要实现的是ie下offsetX的效果
不行，得到的是img距离table的偏移，不过我已经解决了，从网上找到了一个代码，多个函数嵌套用到了
function getPageCoord(element)
{
var coord = {x: 0, y: 0};
while (element)
{
coord.x += element.offsetLeft;
coord.y += element.offsetTop;
element = element.offsetParent;
}
return coord;
}感谢大家的帮助