【JavaScript】精准定位参数学习

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

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

1、事件的各种坐标

之前我总结过一个图:
【JavaScript】精准定位参数学习_第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;//元素的上外边框距离其包含元素的上内边框见的像素距离

【JavaScript】精准定位参数学习_第2张图片

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;//= 内容+上下内边距

【JavaScript】精准定位参数学习_第3张图片

3、滚动大小 scroll dimension

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

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

【JavaScript】精准定位参数学习_第4张图片

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

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

你可能感兴趣的:(javascript)