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

鼠標(biāo)事件屬性

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

元素屬性

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

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

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

• Element.scrollHeight這個只讀屬性是一個元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容。scrollHeight 的值等于該元素在不使用滾動條的情況下為了適應(yīng)視口中所用內(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。此時，當(dāng)你從右到左拖動滾動條時，scrollLeft會從0變?yōu)樨?fù)數(shù)（這個特性在chrome瀏覽器中不存在）。
• Element.scrollTop可以獲取或設(shè)置一個元素的內(nèi)容垂直滾動的像素?cái)?shù)。一個元素的 scrollTop 值是這個元素的頂部到視口可見內(nèi)容（的頂部）的距離的度量。當(dāng)一個元素的內(nèi)容沒有產(chǎn)生垂直方向的滾動條，那么它的 scrollTop 值為0。

HTMLElement接口屬性

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

• HTMLElement.offsetHeight 是一個只讀屬性，它返回該元素的像素高度，高度包含該元素的垂直內(nèi)邊距和邊框，且是一個整數(shù)。通常，元素的offsetHeight是一種元素CSS高度的衡量標(biāo)準(zhǔn)，包括元素的邊框、內(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 是一個只讀屬性，返回當(dāng)前元素左上角相對于 HTMLElement.offsetParent 節(jié)點(diǎn)的左邊界偏移的像素值。對塊級元素來說，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相對于 offsetParent 的邊界框。然而，對于可被截?cái)嗟较乱恍械男袃?nèi)元素（如 span），offsetTop 和 offsetLeft 描述的是第一個邊界框的位置（使用 Element.getClientRects() 來獲取其寬度和高度），而 offsetWidth 和 offsetHeight 描述的是邊界框的尺寸（使用 Element.getBoundingClientRect 來獲取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 來對應(yīng) left、top、width 和 height 的一個盒子將不會是文本容器 span 的盒子邊界。
• HTMLElement.offsetTop 為只讀屬性，它返回當(dāng)前元素相對于其 offsetParent 元素的頂部內(nèi)邊距的距離。
• HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的（指包含層級上的最近）包含該元素的定位元素或者最近的 table,td,th,body元素。當(dāng)元素的 style.display 設(shè)置為 "none" 時，offsetParent 返回 null。offsetParent 很有用，因?yàn)?offsetTop 和 offsetLeft 都是相對于其內(nèi)邊距邊界的。

window屬性

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

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

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

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

• 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）。

• Window.screenLeft 只讀屬性返回瀏覽器左邊框到左邊屏幕邊緣的距離，單位是css的像素。
• Window.screenTop 只讀屬性返回垂直距離，單位是CSS 像素, 從用戶瀏覽器的上邊界到屏幕最頂端。
• Window.screenX返回瀏覽器左邊界到操作系統(tǒng)桌面左邊界的水平距離。
• Window.screenY返回瀏覽器頂部距離系統(tǒng)桌面頂部的垂直距離。
• Window.scrollX返回文檔/頁面水平方向滾動的像素值。pageXOffset 屬性是 scrollY 屬性的別名
• Window.scrollY返回文檔在垂直方向已滾動的像素值。pageYOffset 屬性是 scrollY 屬性的別名

screen屬性

Screen 接口表示一個屏幕窗口，往往指的是當(dāng)前正在被渲染的window對象，可以使用 window.screen 獲取它。

• Screen.availTop瀏覽器窗口在屏幕上的可占用空間上邊距離屏幕上邊界的像素值。
• Screen.availLeft返回瀏覽器可用空間左邊距離屏幕（系統(tǒng)桌面）左邊界的距離。
• Screen.availHeight返回瀏覽器窗口在屏幕上可占用的垂直空間，即最大高度。
• Screen.availWidth返回瀏覽器窗口可占用的水平寬度（單位：像素）。
• Screen.height返回屏幕的高度（單位：像素）。
• Screen.width返回屏幕的寬度。

以上就是詳解JS鼠標(biāo)事件中clientX/screenX/offsetX/pageX屬性的區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于JS鼠標(biāo)事件屬性的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論