浏览器的各种长度宽度clientX clientY pageX pageY x y

1，首先测试pageX ,pageY和clientX clientY

鼠标固定某一位置，通过上下键来移动滚动条，发现clientX clientY始终不变，pageX ,pageY随时变化

pageX，pageY: 以页面为左上角（绝对位置）为参考点，鼠标所在位置坐标是随时变化的

clientX， clientY ：以当前看到页面的左上角（相对位置）为参考点，鼠标所在位置是固定不变的

对于不支持pageX,pageY的浏览器可以这样计算：

PageY=clientY+scrollTop-clientTop (x轴同理)

即：页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度

2，screenX 和screenY

这对坐标是相对于电脑屏幕的左上角为基准点，所以没必要讨论。

3，offsetX，offsetY

offsetX和offsetY在ie和ff上，其是以元素盒子模型的内容区域的左上角（绝对位置）为基准，如果边框较粗的话，可能会出现负值。

在chrome上其跟pageX和pageY相同

4，x ，y

ff不支持，ie和chrome支持,这个本来和layerX/layerY的作用基本一样,

5 layerX, layerY

layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点

也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点