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

jemygraw 發布于2019-08-22 15:56 / 3103人閱讀

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

offsetX,offsetY

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

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

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

clientX，clientY

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

screenX，screenY

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

pageX，pageY

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

pageX與clientX的區別

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

以上除了screenX/Y以設備像素為單位，其他都是以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之間有什么區別? | icessun"s Blog
2.區分event對象中的clientX,offsetX,screenX,pageX

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93887.html

JS基礎篇--了解JS的clientX、pageX、screenX等方法來獲取鼠標坐標詳解

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

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

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

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

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

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

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

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

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

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