<!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=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title>获取鼠标坐标</title>
</head>
<body>
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event; (传的参数不一样)
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>
=========================================================================
IE下:
事件对象是window.event作用于全局。window.event.clientX和window.event.clientY来描述鼠标位置,IE 正好相反,它用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置,而不是文档,非实际位置,所以有scroll的时候就不准确,因此要加上document.body.scrollLeft和document.body.scrollTop的值。
ie的结构比较特殊,http://www.cnblogs.com/JackJiang/archive/2008/12/24/1361048.html,这里有份比较详细的图构。
FF或者Chrome下:
事件对象是传给函数的e,用e.pageX和e.pageY来描述鼠标位置,是相对于文档的位置,所以已经默认包括了scroll偏移的距离,比较准确。