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

在jQuery 中識別目標元素上的點擊座標

要確定點擊時滑鼠指標在指定HTML 元素上的位置，我們可以利用jQuery 事件處理程序。但是，最近遇到了傳回錯誤結果的問題。

修正不正確的定位結果

所提供的初始程式碼嘗試計算相對於使用 event.pageX 和 event.target.offsetLeft 屬性的 target 元素。然而，我們發現這種方法並不能提供準確的結果。

理解事件坐標

區分兩種類型的鼠標指針坐標非常重要：

• 相對於文檔 ：使用event.pageX 和event.pageY 獲取，它們提供指標相對於整個文件的位置。
• 相對到元素：需要使用 offset() 方法確定元素在文件中的位置，然後從指標座標中減去偏移值。

Position() 與Offset()

在此上下文中，position() 方法不合適，因為它計算元素相對於其父容器的元素相對於其父容器的位置，這與此場景無關。另一方面，offset() 方法提供了元素相對於文件的位置，使我們能夠準確計算點擊座標。

改進的程式碼

到解決了該問題，程式碼已被修改以正確確定相對於目標元素的點擊座標：

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