Javascript mouse event offset

ClientX,offsetX,screenX,pageX之間關係

前言

在使用 JavaScript 處理事件時，了解不同的滑鼠坐標屬性非常重要。以下是幾個常用的滑鼠坐標屬性的解釋，它們分別是 clientX/Y、pageX/Y、offsetX/Y 和 screenX/Y。

event.clientX 和 event.clientY

• 這兩個屬性提供了滑鼠鼠標相對於瀏覽器窗口可見區域的 X 和 Y 坐標。
• 這裡的可見區域不包括工具欄和滾動條的部分。
• 這兩個屬性在標準事件模型中都已被定義。

event.pageX 和 event.pageY

• 這兩個屬性類似於 clientX/Y，但它們提供的是滑鼠鼠標相對於整個 html 文件的 X 和 Y 坐標。
• 這意味著它們也考慮了任何滑鼠滾動事件發生的影響。
• `pageX` 和 pageY` 這兩個屬性不是標準屬性，但在大多數瀏覽器中都得到了支持。需要注意的是，在 IE 的事件模型中沒有這兩個屬性。

event.offsetX 和 event.offsetY：

• 這兩個屬性描述了滑鼠鼠標相對於事件觸發源頭的元素的 X 和 Y 坐標。
• 這是指滑鼠鼠標跟觸發事件的元素（比如一個按鈕或者一個連結）的相對位置。
• 標準事件模型中沒有對應的屬性。

event.screenX 和 event.screenY：

• 這兩個屬性提供了滑鼠鼠標相對於使用者的螢幕左上角的 X 和 Y 坐標。
• 這意味著它們考慮了整個螢幕長與寬，而不只是瀏覽器視窗或文件的長與寬。
• 這兩個屬性在標準事件中都被定義。

瞭解這些不同的坐標屬性可以幫助前端工程師更精確地定位和處理在網頁的 UX，特別是對於複雜的滑鼠事件處理。