鼠标指针定位screenX,clientX,pageX,layerX，offsetX

标指针的定位对执行动态的效果来说是十分重要的，而各浏览器对此的解析和执行各有各的风格。今天，我给大家分享一下，它们的区别。

screenX,clientX,pageX,offsetX,layerX都是鼠标指针的位置，而不是元素的位置。

screenX：以计算机显示屏左上角为原点(兼容各大浏览器)。

clientX：以浏览器窗口左上角为原点(兼容各大浏览器)，所以当你滑动条移动的时候，它将改变。

pageX：以文档窗口左上角为原点，也就是以页面的左上角为原点，所以它的位置是不会随着滑动条的改变而改变的但是这个属性是FF特有的属性，ie并没有此属性。但是，我们可以通过pageX=clientX+scrollLeft-clientleft 来获得一样的效果。这里解释一下这段代码的意思:

clientX(如上所说以浏览器窗口左上角为原点)+scrollLeft(页面向左滚动的距离)-clientleft (边框的厚度)。

layerX：这个也是FF特有属性，以触发元素最近的设置了absolute或relative的父亲元素左上角为原点(包含border边框)，如果没有，就以文档窗口左上角为原点。

offsetX：这个属性不兼容Firefox，以触发元素(当前事件的目标对象)左上角(内容的左上角不包括border)为原点。

附加：

因为各大厂商解析时候的不同，使我们使用起来不是那么方便。为了使我们使用方便，我们可以定义一个事件对象标准画函数

function e(event){ //event为事件
if(!event){ //IE
event=window.event;
event.target=event.srcElement;
event.layerX=event.offsetX;
event.layerY=event.offsetY;
}
event.pageX=event.pageX||event.clientX+document.body.scrollLeft;
event.pageY=event.pageY||event.clientY+document.body.scrollTop;
}