JavaScript获取鼠标绝对坐标与DOM元素位置详解

不同浏览器中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对象高度与滚动属性分析

scrollHeight属性用于获取对象内容的实际滚动高度。

scrollLeft属性用于设置或获取对象左边界与窗口中当前可见内容最左端之间的距离。

scrollTop属性用于设置或获取对象最顶端与窗口中当前可见内容最顶端之间的距离。

scrollWidth属性用于获取对象内容的实际滚动宽度。

offsetHeight属性用于获取对象相对于版面或由offsetParent属性指定的父坐标的高度。

offsetLeft属性用于获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。

offsetTop属性用于获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置。

 
// 获取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;
} 

 
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来获取鼠标的绝对位置。