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

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

event 对象位置信息获取 event offsetX clientX 值示意圖先总结下区别：

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 元素位置信息获取 clientWidth clientHeight 说明 offsetWidth offsetHeight 说明 offsetWidth offsetHeight 说明

client 指元素本身的可视内容。不包括 overflow 被折叠起来的部分，不包括滚动条、border，包括 paddingobj.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，不包括滚动条、borderscrollWidth 获取对象的滚动宽度，对象的实际宽度；

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

中的 offset、scroll、client 总结

js 中 getBoundingClientRect

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