MoseEvent 中的幾種座標系

_zhiqiu發表於2024-08-15

本文主要內容：

  • 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;

差異與使用建議

  1. 參考系：

    • screen 座標是相對於整個螢幕的左上角。
    • client 座標是相對於瀏覽器視窗的左上角。
    • page 座標是相對於整個頁面的左上角。
    • offset 座標是相對於事件目標元素的左上角，通常等同於 layer 座標。

  2. 滾動影響：

    • page 座標會隨著頁面的滾動而變化。
    • screen、client 和 offset 座標不會受到頁面滾動的影響。

  3. 圖層互動：

    • offset 座標用於處理具有多個圖層的網頁元素，如彈出選單或模態視窗，幫助確定事件發生的具體圖層。
    • layer 座標在早期用於同樣的目的，但已逐漸被 offset 座標取代。

  4. 應用場景：

    • screen 座標適用於全屏UI元素定位。
    • client 座標適用於視窗內事件定位。
    • page 座標適用於全頁面事件處理。
    • offset 座標適用於處理複雜的圖層結構。

結論

在處理滑鼠事件時，選擇合適的座標系是關鍵。
screenX 和 screenY 適合用於絕對螢幕位置需求，
clientX 和 clientY 適合在視窗內進行定位，
pageX 和 pageY 適用於涉及頁面滾動的情境，
而 offsetX 和 offsetY 則是處理複雜圖層和巢狀結構的最佳選擇。
在現代開發中，優先使用 offsetX 和 offsetY，因為它們已成為標準，能夠更廣泛地相容各類瀏覽器。

透過了解這些座標系的差異和應用場景，我們可以更精準地處理使用者互動事件，從而提升使用者體驗。

相關文章