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

使用 jQuery 获取目标元素上的单击坐标

使用 jQuery 处理 HTML 元素上的单击事件时，在尝试查找相对于元素。这可能是由于对可用 jQuery 方法的误解造成的。

event.pageX 和 event.pageY

这些属性提供相对于文档的鼠标位置。它们并不特定于目标元素。

offset()

此方法给出元素相对于其父元素的偏移位置。它通常用于确定元素在页面上的位置，但它不会给出相对于元素本身的鼠标位置。

position()

与 offset() 不同，此方法给出元素相对于其直接父元素的相对位置。它对于获取内部容器内元素的位置非常有用。

示例

要演示这些方法之间的差异，请考虑以下 HTML：

<div>

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

jQuery("#seek-bar").click(function(e) {
  // Incorrectly uses offset()
  var x = e.pageX - jQuery(this).offset().left;
  console.log(x);

  // Correctly uses position()
  var x = e.pageX - jQuery(this).position().left;
  console.log(x);
});

单击 #seek-bar 时，您会注意到第一个控制台日志会生成结果不正确，因为它使用 offset()，它给出了元素在页面上的绝对位置。然而，第二个控制台日志使用position()提供了相对于元素的正确鼠标位置。

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