firefox上鼠标位置有关问题，怎么实现offsetX
日期：2014-05-16 浏览次数：20519 次
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>
页面下面有多个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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
