【JavaScript】精准定位参数学习

pageX，offsetX，clientX，各种各种的定位参数让人会很晕啊，用的时候会不知道该用哪一个…… 看书的时候觉着好像看的挺明白了，但是到真的要定位要用的时候，就开始懵逼，到底哪个是哪个阿……今天来梳理一下。再扯一点，其实这篇博客早就想整理一下了，但是却总被别的内容给挤掉了，所以这么久了，还是觉着自己对这些的定位参数掌握不牢固。加上最近简历也投了，总在等着电话面试，心里慌慌，导致我只能去准备面试题，根本学不进什么东西了……今天反思了一下，知识还是要认真学，光刷面试题有什么用，答案背过了还是不会用就是扯淡嘛。认真学习！

好了正文开始。下文中的所有event都指的是跨浏览器的event对象，即DOM事件的event，IE事件为window.event

1、事件的各种坐标

之前我总结过一个图：

结合图来看，会比较清楚：

1、clientX clientY

event.clientX;    
event.clientY;

鼠标相对于浏览器窗口可视区域的水平，垂直坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

2、pageX pageY

event.pageX;
event.pageY;

页面坐标，在页面没有滚动的情况下，pageX和pageY与clientX和clientY的值是相等的。但是IE8及更早版本不支持页面坐标，可通过以下代码得到页面坐标，pageX=clientX+scrollLeft：

var div = document.getElementById("myDiv");
div.addEventListener("click",function (event) {
    event = event||window.event;
    var pageX = event.pageX;
    var pageY = event.pageY;
    if(pageX == undefined){ 
        pagex = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    }
    if(pageY == undefined) { 
        pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop) ;
    }   
}, false)

3、screenX screenY

event.screenX;
event.screenY;

鼠标事件发生时鼠标指针相对于屏幕的水平和垂直坐标

4、offsetX offsetY

event.offsetX
event.offsetY

鼠标光标相对于目标元素边界的水平和垂直坐标。

2、元素大小

DOM中没有规定如何确定页面中元素的大小，IE引入了一些属性，所以width和height是基于IE盒模型，即外盒大小=内容+margin
元素的可见大小由其高度/宽度决定，包括所有内边距，滚动条，和边框大小。

1、偏移量 offset dimension

element.offsetHeight;//元素在垂直方向上占用的空间大小，包括元素高度（内容+padding+border）和可见的水平滚动条的高度
element.offsetWidth;//元素在水平方向上占用的空间大小，包括元素宽度（内容+padding+border）和可见的垂直滚动条的高度
element.offsetLeft;//元素的左外边框距离其包含元素的左内边框的像素距离
element.offsetTop;//元素的上外边框距离其包含元素的上内边框见的像素距离

offsetParent： 距离最近的拥有大小的祖先节点
下面代码将算出某个元素在页面上的偏移量，思路是将该元素的offsetHeight和offsetWidth与其offsetParent的对应元素相加，一直循环至根节点，就可以得到一个基本准确的值：

function getElementOffset(element) {
    var offset = { 
        acturalLeft: element.offsetLeft,
        acturalTop: element.offsetTop
    }   
    var current = element.offsetParent;
    while(current != null) {  
        offset.acturalLeft += current.offsetLeft;
        offset.acturalTop += current.offsetTop;
        current = current.offsetParent;//让current等于其offsetParent，继续循环，直到current=null，即循环到了根元素，结束循环
    }
    return offset;
}

注意：
所有上述偏移量都是只读的，并且每次访问它们都需要重新计算，因此，应该避免重复访问这些属性；如果要重复使用它们，可以将其保存在局部变量中，提高性能！

2、客户区大小 clientWidth和clientHeight

客户区大小指的是元素内容及其内边距所占据的大小。不包括滚动条

element.clientWidth;// = 内容+左右内边距
element.clientHeight;//= 内容+上下内边距

3、滚动大小 scroll dimension

滚动大小指的是包含滚动内容的元素的大小

element.scrollHeight;//没有滚动条的情况下，元素内容的总高度
element.scrollWidth;//没有滚动条的情况下，元素内容的总宽度
element.scrollLeft;//被隐藏在内容区域左侧的像素数
element.scrollTop;//被隐藏在内容区上方的像素数

监测元素是否位于顶部，如果不是就将其回滚到顶部：

function scrollToTop(element){ 
    if(element.scrollTop != 0){   
        element.scrollTop = 0;
    }
}