浏览器相关距离
以X,Y结尾的几位都与鼠标事件相关，包括onclick(点击鼠标), mousedown(鼠标按下),mousemove(鼠标按下拖动),mouseup(松开鼠标),mouseover(鼠标滑过),mouseout(鼠标移出)等
clientX, clientY
鼠标点击位置到当前可视区域（网页左上角）的距离，不考虑滚动条。其值的大小与body标签的margin/padding无关。即使body设置了margin/padding，clientX, clientY的值也不会因此改变。
pageX, pageY
鼠标点击位置到当前可视区域（网页左上角）的距离，考虑滚动条。也就是说，pageX=clientX+scroll
screenX, screenY
鼠标点击位置到屏幕左上角的距离
offsetX, offsetY
鼠标点击位置到带有定位的父盒子的距离，此处的距离是内边距
DOM元素相关距离
offsetTop与style.top
如果需要用JS获取某一元素相对父元素的位置，涉及到几个量：offsetTop, offsetLeft, style.left, style.top等，此处以offsetTop为例。
offsetTop 获取的是DOM元素和父元素的边界值，是一个只读的元素。其父元素必须为定位元素(absoulte/ relative)都可以，否则其值恒为0。取值时，offsetTop返回的值为纯数字，style.top返回的值为数字+px
如果需要修改某元素相对于父元素的边距，需要使用style.top，赋值需要在末尾加px，否则在IE低版本浏览器中会失效。
scrollLeft scrollTop
scrollLeft可以读取或设置元素滚动条到元素左边的距离，它是可以赋值的。
注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。
摘自MDN
`
试想这样一个场景，在一个200x200px的范围内随意拖动一张300x300的图片。换言之，图片的可视部分小于它本身的大小。那么如何获取它的具体位置？此时需要使用getBoundingClientRect，使用方法为Element.getBoundingClientRect()方法，返回元素的大小及其相对于视口的位置。
当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值。
摘自MDN
网友评论