如何在 jQuery 中正确获取相对于目标元素的点击坐标？

在 jQuery 中识别目标元素上的点击坐标

要确定单击时鼠标指针在指定 HTML 元素上的位置，我们可以利用 jQuery 事件处理程序。但是，最近遇到了返回错误结果的问题。

纠正不正确的定位结果

提供的初始代码尝试计算相对于使用 event.pageX 和 event.target.offsetLeft 属性的 target 元素。然而，我们发现这种方法并不能提供准确的结果。

理解事件坐标

区分两种类型的鼠标指针坐标非常重要：

• 相对于文档：使用 event.pageX 和 event.pageY 获取，它们提供指针相对于整个文档的位置。
• 相对到元素：需要使用 offset() 方法确定元素在文档中的位置，然后从指针坐标中减去偏移值。

Position() 与Offset()

在此上下文中，position() 方法不合适，因为它计算元素相对于其父容器的位置，这与此场景无关。另一方面，offset() 方法提供了元素相对于文档的位置，使我们能够准确计算点击坐标。

改进的代码

到解决了该问题，代码已被修改以正确确定相对于目标元素的点击坐标：

jQuery("#seek-bar").click(function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    alert(x + ", " + y); 
});

以上是如何在 jQuery 中正确获取相对于目标元素的点击坐标？的详细内容。更多信息请关注PHP中文网其他相关文章！