如何在jQuery中準確取得相對於元素的點擊座標？

使用 jQuery 取得目標元素上的點選座標

使用 jQuery 處理 HTML 元素上的點選事件時，在嘗試尋找相對於元素。這可能是由於對可用 jQuery 方法的誤解造成的。

event.pageX 和 event.pageY

這些屬性提供相對於文件的滑鼠位置。它們並不特定於目標元素。

offset()

此方法給出元素相對於其父元素的偏移位置。它通常用於確定元素在頁面上的位置，但它不會給出相對於元素本身的滑鼠位置。

position()

與 offset() 不同，此方法給出元素相對於其直接父元素的相對位置。它對於獲取內部容器內元素的位置非常有用。

範例

要示範這些方法之間的差異，請考慮以下HTML：

以及以下JavaScript 事件處理程序：

點擊#seek-bar 時，您會注意到第一個控制台日誌會產生不正確的結果，因為它使用offset()，它給出了頁面上的元素。然而，第二個控制台日誌使用position()提供了相對於元素的正確滑鼠位置。

以上是如何在jQuery中準確取得相對於元素的點擊座標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！