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;
}
}