本文详细解析了不同浏览器中获取鼠标绝对坐标的差异，包括IE与Firefox对event属性的支持区别，以及scroll系列属性的作用。同时介绍了两种获取HTML控件绝对位置的方法：通过offsetParent遍历累加坐标，以及利用getBoundingClientRect直接获取边界矩形，适用于跨浏览器开发场景。
不同浏览器中event位置属性分析
在IE浏览器中，event.x和event.y属性的参考基准是触发该事件元素的父元素外部区域，且计算时不包含页面的滚动距离。
Firefox浏览器中，event.pageX和event.pageY属性的参考基准是body元素，计算结果包含了页面的滚动距离。
event.clientX和event.clientY属性以浏览器视口左上角为参考点，其数值不包含页面的滚动距离。
IE浏览器的event.offsetX和event.offsetY，以及Firefox的event.layerX和event.layerY，均以触发事件元素内部左上角为参考点。这些属性包含滚动距离，当元素存在边框时，计算结果可能出现负数。
接着分析DOM对象的高度属性
DOM对象高度与滚动属性分析
scrollHeight属性用于获取对象内容的实际滚动高度。
scrollLeft属性用于设置或获取对象左边界与窗口中当前可见内容最左端之间的距离。
scrollTop属性用于设置或获取对象最顶端与窗口中当前可见内容最顶端之间的距离。
scrollWidth属性用于获取对象内容的实际滚动宽度。
offsetHeight属性用于获取对象相对于版面或由offsetParent属性指定的父坐标的高度。
offsetLeft属性用于获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。
offsetTop属性用于获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置。
基于上述分析，编写两个获取位置的函数
代码示例
获取鼠标绝对位置的函数实现
实现获取鼠标X轴和Y轴绝对位置的JavaScript代码如下：
// 获取X轴位置函数
function mouseX(evt) {
// 针对Firefox浏览器
if (evt.pageX) return evt.pageX;
// 针对IE浏览器
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
else return null;
}
// 获取Y轴位置函数
function mouseY(evt) {
// 针对Firefox浏览器
if (evt.pageY) return evt.pageY;
// 针对IE浏览器
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
else return null;
} 介绍获取Html控件绝对位置的两种方法
代码示例
获取HTML控件绝对位置的两种方法
获取HTML控件绝对位置的两种实现方式代码如下：
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}
function getAbsPoint(obj){
var x, y;
oRect = obj.getBoundingClientRect();
x = oRect.left
y = oRect.top
alert("(" + x + "," + y + ")")
} 注意事项
document.body.scrollLeft和document.body.scrollTop仅适用于IE6之前的版本。在IE6中，如果未声明DOCTYPE或声明为transitional DOCTYPE，则IE6会使用document.documentElement.scrollLeft来获取鼠标的绝对位置。