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

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

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