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

使用 jQuery 查找目标元素上的点击坐标

为了获得鼠标在特定目标元素上单击的精确位置，您可以可以考虑利用 pageX 和 pageY 属性来确定相对于整个文档的位置，或者使用 offset() 方法来建立特定元素内的相对位置。

但是，如果您需要在特定元素内的相对位置元素的父元素或另一个包含元素，您可以使用position()方法。以下是演示这些方法用法的示例：

$('#element').on('click', function(e) {
  // Determining position relative to document using pageX and pageY:
  var clickX = e.pageX;
  var clickY = e.pageY;

  // Determining position relative to element using offset():
  var offsetX = $(this).offset().left;
  var offsetY = $(this).offset().top;
  var relativeClickX = e.pageX - offsetX;
  var relativeClickY = e.pageY - offsetY;

  // Determining position relative to parent using position():
  var positionX = $(this).position().left;
  var positionY = $(this).position().top;
  var parentRelativeClickX = e.pageX - positionX;
  var parentRelativeClickY = e.pageY - positionY;
});

对于您的代码：

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

您的目的是检索鼠标光标相对于 # 的位置单击时的搜索栏元素。但是，e.target.offsetLeft 的减法是不正确的，因为 offsetLeft 属性返回元素相对于其父元素的位置。相反，您应该直接使用 e.pageX，它提供相对于文档的 x 坐标。

请参阅提供的代码演示以获取更详细的说明。

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