本文主要內容： screenX 和 screenY， clientX 和 clientY / x 和 y pageX 和 pageY layerX 和 layerY 在處理滑鼠事件（MouseEvent）時，瞭解不同的坐標系是非常重要的。常見的坐標系包括屏幕坐標（screen）、客戶端坐標（clie ...
本文主要內容：
- screenX 和 screenY，
- clientX 和 clientY / x 和 y
- pageX 和 pageY
- layerX 和 layerY
在處理滑鼠事件（MouseEvent）時，瞭解不同的坐標系是非常重要的。常見的坐標系包括屏幕坐標（screen）、客戶端坐標（client）、頁面坐標（page）、圖層坐標（layer），以及偏移坐標（offset）。這些坐標系各自有不同的用途，理解它們的區別有助於我們更精確地處理用戶交互事件。本文將深入探討這些坐標系的含義及其應用場景。
1. 屏幕坐標（Screen Coordinates）
屏幕坐標表示滑鼠相對於整個屏幕的位置。無論網頁在瀏覽器視窗中的位置如何，屏幕坐標始終相對於屏幕的左上角。它常用於需要瞭解滑鼠在屏幕上絕對位置的場景，如跨屏幕的UI元素定位。
// 獲取屏幕坐標
const screenX = event.screenX;
const screenY = event.screenY;
2. 客戶端坐標（Client Coordinates）
客戶端坐標是相對於瀏覽器視窗可視區域的坐標系，表示滑鼠相對於瀏覽器視窗左上角的位置。客戶端坐標不會受到頁面滾動的影響，這使其非常適合用於描述事件在瀏覽器視窗內的位置，例如在處理視窗內的拖拽操作時。
// 獲取客戶端坐標
const clientX = event.clientX;
const clientY = event.clientY;
在某些情況下，x 和 y 屬性也可用於獲取客戶端坐標，它們是 clientX 和 clientY 的簡寫形式。
3. 頁面坐標（Page Coordinates）
頁面坐標是相對於整個文檔頁面的坐標系。與客戶端坐標不同，頁面坐標會受到頁面滾動的影響，表示滑鼠在整個頁面文檔中的位置。它適用於需要考慮整個頁面佈局的場景，如定位頁面中的特定元素。
// 獲取頁面坐標
const pageX = event.pageX;
const pageY = event.pageY;
4. 圖層坐標與偏移坐標（Layer Coordinates & Offset Coordinates）
圖層坐標（layerX 和 layerY）表示事件相對於事件觸發元素的圖層（可能是一個特定的 DOM 元素）的坐標。偏移坐標（offsetX 和 offsetY）則表示事件相對於事件目標元素內部的坐標。在現代瀏覽器中，這兩者通常是相同的，因為 layerX 和 layerY 已逐漸被 offsetX 和 offsetY 取代。
// 獲取偏移坐標（等同於圖層坐標）
// offset 坐標是相對於 padding 開始的
// 如果設置了 `box-sizing: border-box` 則 offset 坐標幾乎等於 layer 坐標
const offsetX = event.offsetX;
const offsetY = event.offsetY;
差異與使用建議
-
參考系：
- screen 坐標是相對於整個屏幕的左上角。
- client 坐標是相對於瀏覽器視窗的左上角。
- page 坐標是相對於整個頁面的左上角。
- offset 坐標是相對於事件目標元素的左上角，通常等同於 layer 坐標。
-
滾動影響：
- page 坐標會隨著頁面的滾動而變化。
- screen、client 和 offset 坐標不會受到頁面滾動的影響。
-
圖層交互：
- offset 坐標用於處理具有多個圖層的網頁元素，如彈出菜單或模態視窗，幫助確定事件發生的具體圖層。
- layer 坐標在早期用於同樣的目的，但已逐漸被 offset 坐標取代。
-
應用場景：
- screen 坐標適用於全屏UI元素定位。
- client 坐標適用於視窗內事件定位。
- page 坐標適用於全頁面事件處理。
- offset 坐標適用於處理複雜的圖層結構。
結論
在處理滑鼠事件時，選擇合適的坐標系是關鍵。
screenX 和 screenY 適合用於絕對屏幕位置需求，
clientX 和 clientY 適合在視窗內進行定位，
pageX 和 pageY 適用於涉及頁面滾動的情境，
而 offsetX 和 offsetY 則是處理複雜圖層和嵌套結構的最佳選擇。
在現代開發中，優先使用 offsetX 和 offsetY，因為它們已成為標準，能夠更廣泛地相容各類瀏覽器。
通過瞭解這些坐標系的差異和應用場景，我們可以更精準地處理用戶交互事件，從而提升用戶體驗。
本文來自博客園，作者：_zhiqiu，轉載請註明原文鏈接：https://www.cnblogs.com/guojikun/p/18361122
