javascript获取坐标/滚动/宽高/距离

坐标（鼠标/触摸）

event.screenX                          鼠标/触摸，相对于显示屏的X坐标
event.screenY                          鼠标/触摸，相对于显示屏的Y坐标

event.clientX                          鼠标/触摸，相对于浏览器视口的X坐标
event.clientY                          鼠标/触摸，相对于浏览器视口的Y坐标

event.pageX                            鼠标/触摸，相对于文档的X坐标(ie不支持)
event.pageY                            鼠标/触摸，相对于文档的Y坐标(ie不支持)

event.offsetX                          鼠标/触摸，相对于触发事件的X坐标(ie独有)
event.offsetY                          鼠标/触摸，相对于触发事件的Y坐标(ie独有)

滚动（窗口/页面）

window.pageXOffset                     X轴滚动条，能向右滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
window.pageYOffset                     Y轴滚动条，能向下滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）

document.body.scrollLeft               X轴滚动条，能向右滚动的距离（仅移动端支持）
document.body.scrollTop                Y轴滚动条，能向下滚动的距离（仅移动端支持）

document.documentElement.scrollTop     X轴滚动条，能向右滚动的距离（仅PC端支持）
document.documentElement.scrollLeft    Y轴滚动条，能向下滚动的距离（仅PC端支持）

document.scrollingElement.scrollTop    X轴滚动条，能向右滚动的距离（ie不支持）
document.scrollingElement.scrollLeft   Y轴滚动条，能向下滚动的距离（ie不支持）

宽高（屏幕/游览器视口/页面）

screen.width                           屏幕宽度
screen.height                          屏幕高度
screen.availWidth                      屏幕可用宽度
screen.availWidth                      屏幕可用高度

window.outerWidth                      游览器宽度
window.outerHeight                     游览器高度
window.innerWidth                      游览器视口宽度
window.innerHeight                     游览器视口高度

document.body.offsetWidth              页面宽度
document.body.offsetHeight             页面高度
document.body.clientWidth              页面可显示宽度
document.body.clientHeight             页面可显示高度

宽高&距离（DOM）

offsetWidth                            元素宽度（可视内容区 + 滚动条 + 内边距 + 边框）
offsetHeight                           元素高度（可视内容区 + 滚动条 + 内边距 + 边框）
offsetLeft                             与相邻父级的左距离
offsetTop                              与相邻父级的上距离

clientWidth                            元素宽度（可视内容区 + 内边距）
clientHeight                           元素高度（可视内容区 + 内边距）
clientLeft                             内边距边缘与边框边缘的距离（左边框）
clientTop                              内边距边缘与边框边缘的距离（上边框）

scrollWidth                            元素宽度（可视内容区 + 滚动内容区 + 内边距）
scrollHeight                           元素高度（可视内容区 + 滚动内容区 + 内边距）
scrollLeft                             隐藏的滚动距离（待滚动距离）
scrollTop                              隐藏的滚动距离（待滚动距离）

宽高&位置（DOM）

getBoundingClientRect()                返回元素的宽高与坐标集合
                                           > 宽高 = 可视内容区 + 内边距 + 边框
                                           > 坐标
                                                 left = 位移 + 外边距
                                                 right = 位移 + 完整盒子模型所占宽度
                                                 top = 同left
                                                 bottom = 同right

getClientRects()                       返回元素的数个矩形区域的类数组对象（集合）
                                           > 用于块级元素，则集合[n]和getBoundingClientRect返回相同
                                           > 用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员
                                           > 该方法，用于判断行内元素是否换行，以及行内元素的每一行的位置偏移

document.getClientRects(x, y)          返回当前文档上处于指定坐标位置最顶层的元素的最里层元素
                                           > 最顶层，指z-index最大的元素
                                           > 最里层，是指最里层面的子元素
                                           > 该方法，用来检测元素是否发生重叠或是碰撞

临近父容器

offsetParent

获取与邻近父级的距离集合

function getElementPosition(e) {
    var x = 0, y = 0;
    while (e != null) {
        x+=e.offsetLeft;
        y+=e.offsetTop;
        e=e.offsetParent;
    }
    return { x: x, y: y };
}

1.对于表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，得到的值并不精确
2.当文档中含有滚动条的时候，该方法就不能正常工作了