Javascript基础之事件对象中的坐标

视口坐标

• clientX: 相对文档的水平座标
• clientY: 相对文档的垂直座标
• clientLeft: 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
• clientWidth: 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

页面坐标

page为页面的意思，页面的高度一般情况client游览器显示区域装不下，所以会出现垂直滚动条。

• pageX: 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 随滚动条滚动而改变；
• pageY: 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 随滚动条滚动而改变；

IE不支持

屏幕坐标

• scrollHeight: 获取对象的滚动高度。
• scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
• scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
• scrollWidth:获取对象的滚动宽度

相对容器的坐标

• offsetX: 相对容器的水平坐标
• offsetY: 相对容器的垂直坐标
• offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
• offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
• offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
• offsetwidth: 是元素相对父元素的偏移宽度。等于border+padding+width

Chrome下，offsetX offsetY是包含边框的，如图所示:

IE、FF是不包含边框的，如果鼠标进入到border区域，为返回负值，如图所示:

IE9+