再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下(画得我手那个酸呀。。。。)

event对象位置信息获取

 

先总结下区别：

event.clientX、event.clientY

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

event.pageX、event.pageY

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

dom元素位置信息获取

 

client指元素本身的可视内容。不包括overflow被折叠起来的部分，不包括滚动条、border，包括padding

    obj.clientWidth = (width + padding)   //获取元素的宽度——对象可见的宽度，会随窗口的显示大小改变

    obj.clientHeight = (height + padding)  //元素的高

    clientTop、clientLeft 这两个返回的是元素周围边框的厚度，一般它的值就是0。因为滚动条不会出现在顶部或者左侧

offset 指偏移，包括这个元素在文档中占用的所有显示宽度。比client 多了border。

    obj.offsetWidth = width + padding + border  //元素的宽度

    obj.offsetHeight = border-width*2+padding-top+height+padding-bottom //元素的高度

    offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的父级元素中最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

• 如果当前元素的父级元素中没有进行CSS定位（position为absolute/relative），offsetParent为body

• 如果当前元素的父级元素中有CSS定位（position为absolute/relative），offsetParent取父级中最近的元素

    obj.offsetLeft   //合并后的高度 ，元素相对于父元素获整个版面，由offsetParent 属性指定的父坐标的计算上侧位置

    obj.offsetTop  //元素相对于父元素的top

如果弹框的宽度（offsetWidth）+距离左边的距离（offsetLeft）大于父元素的宽度，则判断为超出外部元素范围，需要动态改变弹框距离边框的位置

scroll指滚动，包括这个元素没显示出来的实际宽度，包括padding，不包括滚动条、border

    scrollWidth 获取对象的滚动宽度，对象的实际宽度；

    scrollHeight 获取对象的滚动高度

    scrollLeft 已滚动过去的宽度 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

    scrollTop  设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

 

js中getBoundingClientRect

 

当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。

转载本站文章《再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/xml/2015_1209_353.html