鼠标事件中的各种坐标

鼠标事件对象中的各种坐标

在鼠标的事件对象中，含有很多可描述坐标的属性，但是它们之间是有区别的。
常见的属性有:

1. clientX/Y

含义: 表示当前鼠标位置距离可视区域的距离，这个可视区域指的是浏览器窗口的大小，或者可理解为整个网页,网页是不会因为滚动条滚动而变化的。所以该值并不会因为出现滚动条而变化。
兼容性: 各个浏览器都支持。

2. pageX/Y

含义: 这个值代表的是当前鼠标位置距离网页首屏的距离，因为网页首屏是随着滚动条的滚动而变化, 首屏指的是你看见的第一屏，滚动后就是第二屏,第三屏。所以该值会因滚动而变化。
兼容性：IE8及其以下不支持该属性 火狐没有该属性
兼容处理:

pageX = clientX + scrollLeft pageY = clientY + scrollTop

3. offsetX/Y

含义: 表示当前鼠标位置距离其所属Dom的元素的水平以及垂直偏移量,但是参考点在不同的浏览器是不相同的，IE认为参考点是dom元素的padding开始的左上角部分,而chrome认为参考点是dom 以border开始的左上角开始的位置。
兼容性：待补充

4. lauyoutX/Y

含义: 与pageX/Y 是一个意思，火狐没有pageX/Y属性从而出的一个替代品
兼容性：

5. x/y

补充

• 参考点

  1. 绝对定位元素相对于body进行定位,参考点是网页首屏,也就是会随着滚动条滚动而变化。参考点等同于pageX
  2. 固定定位的参考点是整个文档.不会因滚动而变化。参考点等同于clientX