總是會被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