詳解JS鼠標事件中clientX/screenX/offsetX/pageX屬性的區(qū)別

更新時間：2024年03月07日 14:21:39 作者：TheRisingDragon

在熟悉業(yè)務中播放器功能的時候,發(fā)現(xiàn)時間軸上綁定了點擊和拖動事件,頻繁遇到了類似pageX之類的事件屬性,所以本文就來和大家詳細聊聊clientX/screenX/offsetX/pageX等屬性的區(qū)別吧

在熟悉業(yè)務中播放器功能的時候，發(fā)現(xiàn)時間軸上綁定了點擊和拖動事件，頻繁遇到了類似pageX之類的事件屬性。往往在需要動態(tài)計算元素的高度或者事件發(fā)生位置時需要用到此類屬性，之前的學習中沒有系統(tǒng)性地進行過歸納總結(jié)?，F(xiàn)從最基本的鼠標事件的屬性開始，完整的梳理一下各個屬性的區(qū)別以便日后查看。

鼠標事件屬性

主要分為MouseEvent.clientX、MouseEvent.clientY、MouseEvent.movementX、MouseEvent.movementY、MouseEvent.offsetX、MouseEvent.offsetY、MouseEvent.pageX、MouseEvent.pageY、MouseEvent.screenX、MouseEvent.screenY、MouseEvent.x、MouseEvent.y

MouseEvent.clientX 是只讀屬性，它提供事件發(fā)生時的應用客戶端區(qū)域的水平坐標 (與頁面坐標不同)。例如，不論頁面是否有水平滾動，當你點擊客戶端區(qū)域的左上角時，鼠標事件的 clientX 值都將為 0 。最初這個屬性被定義為長整型（long integer），如今 CSSOM 視圖模塊將其重新定義為雙精度浮點數(shù)（double float）。你可以查閱瀏覽器兼容性部分的文檔來進一步了解有關(guān)信息。
MouseEvent.clientY 是只讀屬性，它提供事件發(fā)生時的應用客戶端區(qū)域的垂直坐標 (與頁面坐標不同)。例如，當你點擊客戶端區(qū)域的左上角時，鼠標事件的 clientY 值為 0 ，這一值與頁面是否有垂直滾動無關(guān)。
MouseEvent.movementX 是只讀屬性，它提供了當前事件和上一個mousemove事件之間鼠標在水平方向上的移動值。換句話說，這個值是這樣計算的 : currentEvent.movementX = currentEvent.screenX - previousEvent.screenX.
MouseEvent.movementY 是只讀屬性，它提供了當前事件和上一個 mousemove 事件之間鼠標在水平方向上的移動值。換句話說，這個值是這樣計算的 :currentEvent.movementY = currentEvent.screenY - previousEvent.screenY.
MouseEvent.offsetX規(guī)定了事件對象與目標節(jié)點的內(nèi)填充邊（padding edge）在 X 軸方向上的偏移量。
MouseEvent.offsetY規(guī)定了事件對象與目標節(jié)點的內(nèi)填充邊（padding edge）在 Y 軸方向上的偏移量。
MouseEvent.pageX 是一個由MouseEvent接口返回的相對于整個文檔的x（水平）坐標以像素為單位的只讀屬性。這個屬性將基于文檔的邊緣，考慮任何頁面的水平方向上的滾動。舉個例子，如果頁面向右滾動 200px 并出現(xiàn)了滾動條，這部分在窗口之外，然后鼠標點擊距離窗口左邊 100px 的位置，pageX 所返回的值將是 300。
MouseEvent.pageY是一個只讀屬性，它返回觸發(fā)事件的位置相對于整個 document 的 Y 坐標值。由于其參考物是整個 dom，所以這個值受頁面垂直方向的滾動影響。例如：當你垂直方向向下滾動了 50 pixel，那么你在頂端進行點擊的時候，獲取的pageY為 50pixed 而不是 0。
MouseEvent.screenX是只讀屬性，他提供了鼠標相對于屏幕坐標系的水平偏移量。
MouseEvent.screenY是只讀屬性，它提供了鼠標相對于屏幕坐標系的垂直偏移量。
MouseEvent.x 是 MouseEvent.clientX 屬性的別名.
MouseEvent.y 屬性是 MouseEvent.clientY 屬性的別稱。

元素屬性

Element 是一個通用性非常強的基類，所有 Document 對象下的對象都繼承自它。這個接口描述了所有相同種類的元素所普遍具有的方法和屬性。一些接口繼承自 Element 并且增加了一些額外功能的接口描述了具體的行為。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基礎(chǔ)。大多數(shù)功能是在這個類的更深層級（hierarchy）的接口中被進一步制定的。

Element.clientHeight是只讀屬性，對于沒有定義CSS或者內(nèi)聯(lián)布局盒子的元素為0，否則，它是元素內(nèi)部的高度(單位像素)，包含內(nèi)邊距，但不包括水平滾動條、邊框和外邊距。clientHeight 可以通過 CSS height + CSS padding - 水平滾動條高度 (如果存在)來計算.
Element.clientWidth只讀屬性，內(nèi)聯(lián)元素以及沒有 CSS 樣式的元素的 clientWidth 屬性值為 0。Element.clientWidth 屬性表示元素的內(nèi)部寬度，以像素計。該屬性包括內(nèi)邊距，但不包括垂直滾動條（如果有）、邊框和外邊距。

Element.clientLeft表示一個元素的左邊框的寬度，以像素表示。如果元素的文本方向是從右向左（RTL, right-to-left），并且由于內(nèi)容溢出導致左邊出現(xiàn)了一個垂直滾動條，則該屬性包括滾動條的寬度。clientLeft 不包括左外邊距和左內(nèi)邊距。clientLeft 是只讀的。
Element.clientTop一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內(nèi)邊距。clientTop 是只讀的。

Element.scrollHeight這個只讀屬性是一個元素內(nèi)容高度的度量，包括由于溢出導致的視圖中不可見內(nèi)容。scrollHeight 的值等于該元素在不使用滾動條的情況下為了適應視口中所用內(nèi)容所需的最小高度。沒有垂直滾動條的情況下，scrollHeight值與元素視圖填充所有內(nèi)容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after這樣的偽元素。
Element.scrollWidth這個只讀屬性是元素內(nèi)容寬度的一種度量，包括由于overflow溢出而在屏幕上不可見的內(nèi)容。scrollWidth值等于元素在不使用水平滾動條的情況下適合視口中的所有內(nèi)容所需的最小寬度。寬度的測量方式與clientWidth相同：它包含元素的內(nèi)邊距，但不包括邊框，外邊距或垂直滾動條（如果存在）。它還可以包括偽元素的寬度，例如::before或::after。如果元素的內(nèi)容可以適合而不需要水平滾動條，則其scrollWidth等于clientWidth

Element.scrollLeft可以讀取或設(shè)置元素滾動條到元素左邊的距離。注意如果這個元素的內(nèi)容排列方向（direction）是rtl (right-to-left) ，那么滾動條會位于最右側(cè)（內(nèi)容開始處），并且scrollLeft值為0。此時，當你從右到左拖動滾動條時，scrollLeft會從0變?yōu)樨摂?shù)（這個特性在chrome瀏覽器中不存在）。
Element.scrollTop可以獲取或設(shè)置一個元素的內(nèi)容垂直滾動的像素數(shù)。一個元素的 scrollTop 值是這個元素的頂部到視口可見內(nèi)容（的頂部）的距離的度量。當一個元素的內(nèi)容沒有產(chǎn)生垂直方向的滾動條，那么它的 scrollTop 值為0。

HTMLElement接口屬性

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接實現(xiàn)了HTMLElement接口，其它的間接實現(xiàn)HTMLElement接口.

HTMLElement.offsetHeight 是一個只讀屬性，它返回該元素的像素高度，高度包含該元素的垂直內(nèi)邊距和邊框，且是一個整數(shù)。通常，元素的offsetHeight是一種元素CSS高度的衡量標準，包括元素的邊框、內(nèi)邊距和元素的水平滾動條（如果存在且渲染的話），不包含:before或:after等偽類元素的高度。對于文檔的body對象，它包括代替元素的CSS高度線性總含量高。浮動元素的向下延伸內(nèi)容高度是被忽略的。如果元素被隱藏（例如元素或者元素的祖先之一的元素的style.display被設(shè)置為none），則返回0
HTMLElement.offsetWidth 是一個只讀屬性，返回一個元素的布局寬度。一個典型的（譯者注：各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)、水平線上的內(nèi)邊距(padding)、豎直方向滾動條(scrollbar)（如果存在的話）、以及CSS設(shè)置的寬度(width)的值。

HTMLElement.offsetLeft 是一個只讀屬性，返回當前元素左上角相對于 HTMLElement.offsetParent 節(jié)點的左邊界偏移的像素值。對塊級元素來說，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相對于 offsetParent 的邊界框。然而，對于可被截斷到下一行的行內(nèi)元素（如 span），offsetTop 和 offsetLeft 描述的是第一個邊界框的位置（使用 Element.getClientRects() 來獲取其寬度和高度），而 offsetWidth 和 offsetHeight 描述的是邊界框的尺寸（使用 Element.getBoundingClientRect 來獲取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 來對應 left、top、width 和 height 的一個盒子將不會是文本容器 span 的盒子邊界。
HTMLElement.offsetTop 為只讀屬性，它返回當前元素相對于其 offsetParent 元素的頂部內(nèi)邊距的距離。
HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的（指包含層級上的最近）包含該元素的定位元素或者最近的 table,td,th,body元素。當元素的 style.display 設(shè)置為 "none" 時，offsetParent 返回 null。offsetParent 很有用，因為 offsetTop 和 offsetLeft 都是相對于其內(nèi)邊距邊界的。

window屬性

window 對象表示一個包含DOM文檔的窗口，其 document 屬性指向窗口中載入的 DOM文檔。使用 document.defaultView 屬性可以獲取指定文檔所在窗口。

window作為全局變量，代表了腳本正在運行的窗口，暴露給 Javascript 代碼。

本節(jié)為 DOM Window 對象中可用的所有方法、屬性和事件提供簡要參考。window 對象實現(xiàn)了 Window 接口，此接口繼承自 AbstractView 接口。一些額外的全局函數(shù)、命名空間、對象、接口和構(gòu)造函數(shù)與 window 沒有典型的關(guān)聯(lián)，但卻是有效的，它們在 JavaScript參考和 DOM參考中列出。

在有標簽頁功能的瀏覽器中，每個標簽都擁有自己的 window 對象；也就是說，同一個窗口的標簽頁之間不會共享一個 window 對象。有一些方法，如 window.resizeTo 和 window.resizeBy 之類的方法會作用于整個窗口而不是 window 對象所屬的那個標簽。一般而言，如果一樣東西無法恰當?shù)刈饔糜跇撕?，那么它就會作用于窗口?/p>

Window.innerHeight瀏覽器窗口的視口（viewport）高度（以像素為單位）；如果有水平滾動條，也包括滾動條高度。
Window.innerWidth瀏覽器視口（viewport）寬度（單位：像素），如果存在垂直滾動條則包括它。
Window.outerHeightWindow.outerHeight 獲取整個瀏覽器窗口的高度（單位：像素），包括側(cè)邊欄（如果存在）、窗口鑲邊（window chrome）和窗口調(diào)正邊框（window resizing borders/handles）
Window.outerWidth獲取瀏覽器窗口外部的寬度。表示整個瀏覽器窗口的寬度，包括側(cè)邊欄（如果存在）、窗口鑲邊（window chrome）和調(diào)正窗口大小的邊框（window resizing borders/handles）。