理解clientX,clientY,pageX,pageY,offsetX,offsetY

[sakila1012]

写在前面

之前遇到这几属性一直没有明白它们代表什么，以及它们之间的关联，今天在项目中正好遇到了，记录下对它们的理解。

clientX，clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），表示页面可视区域的X，Y偏移量，可视区域不包含工具栏和滚动条，搜索栏等。并且与页面滚动无关，滚动后的clientY值不变。

pageX，pageY

类似于 clientX，clientY，但它们使用的是文档坐标而非窗口坐标。页面坐标Y，与clientY基本类似，唯一区别在于该值与页面滚动有关，具体来说,pageY = clientY + 页面滚动高度。

offsetX，offsetY

鼠标相对于事件源元素（srcElement）的X，Y坐标。

clientHeight，offsetHeight，scrollHeight

documentElement 和 body 的相关说明

body 是 DOM 对象里的 body 子节点，即 标签

documentElement 是整个节点树的根节点 root，即 标签

DOM 把层次中的每一个对象称之为节点，就是一个层次结构，可以理解为一个属性结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

除了 documentElement，body 在浏览器下的表现方式的不同和各个浏览器对这三个属性的解释不同

下面就看看各个浏览器这些个东西作怪下对这三个属性的表现

1. Chrome
   

2. Firefox

3. IE 10