IE属性
- x/y : 事件发生的位置的 x 坐标和y坐标，它们相对于用CSS动态定位的最内层包容元素。
- offsetX,offsetY : 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
鼠标/键盘属性
- clientX ：返回当事件被触发时，鼠标指针的水平坐标。
- clientY ：返回当事件被触发时，鼠标指针的垂直坐标。
- screenX ：返回当某个事件被触发时，鼠标指针的水平坐标。
- screenY ：返回当某个事件被触发时，鼠标指针的垂直坐标。
- pageX/Y：参照点是页面本身左上角的原点.已经把滚动条滚过的高或宽计算在内.
tip
- clientX/Y : 相对于触发事件,计算left或top时直接忽略了滚动条的高和宽,参照点会随之滚动条的移动而移动,为浏览器可见区域的左上角。
- screenX/Y : 设置或获取获取鼠标指针位置相对于用户屏幕的 X/Y 坐标。
总结：
pageX > clientX, pageY > clientY
pageX = clientX + ScrollLeft(滚动条滚过的水平距离)
pageY = clientY + ScrollTop(滚动条滚过的垂直距离)
网页
-
document.body.clientWidth ：网页可见区域宽;
-
document.body.clientHeight ：网页可见区域高;
-
clientLeft: 获取对象的border宽度;
-
clientTop：获取对象的border高度;
-
document.body.offsetHeight (包括边线的宽):网页可见区域高;
-
document.body.offsetWidth (包括边线的宽):网页可见区域宽;
-
document.body.scrollWidth:网页正文全文宽;
-
document.body.scrollHeight:网页正文全文高;
-
document.body.scrollTop:网页被卷去的高;
-
document.body.scrollLeft:网页被卷去的左;
-
window.screenTop:网页正文部分上;
-
window.screenLeft:网页正文部分左;
屏幕
- window.screen.height/width：屏幕分辨率的高/宽;
- window.screen.availHeight：屏幕可用工作区高度;
- window.screen.availWidth: 屏幕可用工作区宽度;
小结
- clientX/Y 设置或获取鼠标指针位置相对于当前窗口(可见区域)的X/Y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
- offsetX/Y 设置或获取鼠标指针位置相对于触发事件的对象的X/Y坐标。
- screenX/Y 设置或获取获取鼠标指针位置相对于用户屏幕的X/Y坐标。(用户屏幕左上角)
- pageX/Y 设置或获取鼠标指针位置相对于当前窗口的X/Y坐标，其中客户区域包括窗口自身的控件和滚动条。
