screenX/Y，clientX/Y，offsetX/Y和pageX/Y之間有什么區(qū)別?

jemygraw 發(fā)布于2019-08-22 15:56 / 3108人閱讀

摘要：意為偏移量，是被點擊的元素距左上角為參考原點的長度，而和的參考點有所差異。下，是包含邊框的，如圖所示。而是不包含邊框的，如果鼠標(biāo)進入到區(qū)域，為返回負值，如圖所示。

offsetX,offsetY

offset意為偏移量，是被點擊的元素距左上角為參考原點的長度，而IE、FF和Chrome的參考點有所差異。

Chrome下，offsetX offsetY是包含邊框的，如圖所示。

而IE、FF是不包含邊框的，如果鼠標(biāo)進入到border區(qū)域，為返回負值，如圖所示。

clientX，clientY

設(shè)置或獲取鼠標(biāo)指針位置相對于瀏覽器視口（內(nèi)容區(qū)域的左上角）的坐標(biāo)，與瀏覽器是否有滾動條無關(guān)
相對于頁面的可見部分的左上角，通過瀏覽器窗口“看到”。

screenX，screenY

鼠標(biāo)指針位置相對于設(shè)備屏幕的左上角的坐標(biāo)，如果在chrome
devtool以手機模式查看頁面，獲取的還是相對于整個電腦屏幕的左上角的坐標(biāo)

pageX，pageY

相對于瀏覽器中完全呈現(xiàn)的內(nèi)容區(qū)域的左上角，此參考點位于左上方的網(wǎng)址欄和后退按鈕下方。如果在頁面中嵌入可嵌入的可滾動頁面，并且用戶移動滾動條，則可以實際改變位置。
坐標(biāo)相對于整個渲染頁面的左上角（包括滾動隱藏的部分）

pageX與clientX的區(qū)別

也就是說，當(dāng)瀏覽器沒有滾動條的時候，pageX和clientX是一樣的

以上除了screenX/Y以設(shè)備像素為單位，其他都是以css像素為單位

測試代碼：

document.addEventListener("click", function(e) {
  console.log(
    "page: " + e.pageX + "," + e.pageY,
    "client: " + e.clientX + "," + e.clientY,
    "screen: " + e.screenX + "," + e.screenY,
    "offset: " + e.offsetX+ "," + e.offsetY)
}, false);

參考文章：
1.screenX / Y，clientX / Y和pageX / Y之間有什么區(qū)別? | icessun"s Blog
2.區(qū)分event對象中的clientX,offsetX,screenX,pageX

云服務(wù)器 GPU云服務(wù)器公分和厘米有什么區(qū)別空間和vps有什么區(qū)別托管和租賃機柜有什么區(qū)別 html和css有什么區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93887.html

相關(guān)文章

JS基礎(chǔ)篇--了解JS的clientX、pageX、screenX等方法來獲取鼠標(biāo)坐標(biāo)詳解

摘要：相對瀏覽器窗口簡單代碼即可實現(xiàn)，然而這是還不夠，因為絕大多數(shù)情況下我們希望獲取鼠標(biāo)點擊位置相對于瀏覽器窗口的坐標(biāo)，的，屬性分別表示鼠標(biāo)點擊位置相對于文檔的左邊距，上邊距。在一些DOM操作中我們經(jīng)常會跟元素的位置打交道，鼠標(biāo)交互式一個經(jīng)常用到的方面，令人失望的是不同的瀏覽器下會有不同的結(jié)果甚至是有的瀏覽器下沒結(jié)果，這篇文章就上鼠標(biāo)點擊位置坐標(biāo)獲取做一些簡單的總結(jié)，沒特殊聲明代碼在IE8...

phodal 2019-08-21 10:23 評論0 收藏0
js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,scr

摘要：什么是，文檔對象模型。是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)，定義了訪問和文檔的標(biāo)準(zhǔn)。在的標(biāo)準(zhǔn)中，是獨于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容結(jié)構(gòu)和樣式。獲取到的是觸發(fā)點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。什么是DOM? DOM，文檔對象模型（Document Object Model）。DOM是 W3C（萬維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)，DOM定義了訪問HTML和XML文檔的標(biāo)準(zhǔn)。...

toddmark 2019-08-23 12:00 評論0 收藏0
Javascript中常用寬高和坐標(biāo)屬性

摘要：是一個只讀的屬性，元素的內(nèi)容高度寬度，包括由于屬性而不可見的部分。一個只讀屬性，返回一個指向最近的包含該元素的定位元素。很有用，因為和都是相對于其內(nèi)邊距邊界的。它包括內(nèi)部的寬度和高度和，但不包括滾動條和。 1.scrollHeight/Width scrollHeight/Width是一個只讀的屬性，元素的內(nèi)容高度/寬度，包括由于overflow屬性而不可見的部分。不能直接從css中得...

wuyangnju 2019-08-20 10:37 評論0 收藏0
JavaScript 事件詳解

摘要：事件監(jiān)聽函數(shù)標(biāo)準(zhǔn)的事件監(jiān)聽函數(shù)如下上面的示例表示先獲得表示節(jié)點的對象，然后在這個對象上面添加了一個事件監(jiān)聽器，當(dāng)監(jiān)聽到事件發(fā)生時，則調(diào)用回調(diào)函數(shù)，即在控制臺輸出。 JavaScript 事件解讀 1. 事件基本概念事件是指在文檔或者瀏覽器中發(fā)生的一些特定交互瞬間，比如打開某一個網(wǎng)頁，瀏覽器加載完成后會觸發(fā) load 事件，當(dāng)鼠標(biāo)懸浮于某一個元素上時會觸發(fā) hover 事件，當(dāng)鼠標(biāo)點擊...

Object 2019-08-19 18:12 評論0 收藏0
[譯 + 補充]理解 DOM 座標(biāo)

摘要：相對於座標(biāo)在可視區(qū)的最左上角?；笞鶚?biāo)通常透過事件取得。再次強調(diào)不幸的是沒有屬性可以直接取得元素對應(yīng)的座標(biāo)。觸發(fā)事件的元素相對於父容器定位元素的座標(biāo)，從開始計算。上個座標(biāo)與當(dāng)前的座標(biāo)移動距離。座標(biāo)系統(tǒng) 在瀏覽器中有兩種座標(biāo)系統(tǒng) & 滑鼠座標(biāo)： 1. 相對於 `document` - 座標(biāo) (0, 0) 在整個頁面的最左上角。 2. 相對於 `window` - 座標(biāo) (0, 0) 在...

Lionad-Morotar 2019-08-21 15:09 評論0 收藏0