如何使用JQuery获得目标元素的相对点击坐标

要使用jQuery获得目标元素的相对点击坐标，可以按照以下步骤操作：

1. 获取点击事件的位置

获取点击事件产生的相对位置，可以使用jQuery的事件类(event)的常用属性 pageX 和 pageY。这些属性可以获得鼠标点击位置相对于文档左上角的位置。

$(document).on('click', function(event) {
  var x = event.pageX;
  var y = event.pageY;
});

2. 获取目标元素位置

想要获得相对于目标元素的坐标，需要使用jQuery的offset()方法，它可以获得元素相对于文档左上角的偏移。

$(document).on('click', function(event) {
  var x = event.pageX;
  var y = event.pageY;
  var $target = $(event.target);
  var offset = $target.offset();
  var targetX = x - offset.left;
  var targetY = y - offset.top;
});

在这个代码中，首先获取点击事件的位置(pageX 和 pageY)和目标元素($target)。接着使用offset()方法获取目标元素相对于文档左上角的位置。然后计算出目标元素相对于鼠标点击事件的位置(targetX 和 targetY)。

示例1

<div id="target">点击我</div>

$('#target').on('click', function(event) {
  var x = event.pageX;
  var y = event.pageY;
  var $target = $(event.target);
  var offset = $target.offset();
  var targetX = x - offset.left;
  var targetY = y - offset.top;
  console.log(targetX, targetY);
});

在这个示例中，当点击目标元素时，控制台输出目标元素相对于点击事件的位置。

示例2

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

$('.box').on('click', function(event) {
  var x = event.pageX;
  var y = event.pageY;
  var $target = $(event.target);
  var $container = $('#container');
  var containerOffset = $container.offset();
  var targetOffset = $target.offset();
  var targetX = targetOffset.left - containerOffset.left;
  var targetY = targetOffset.top - containerOffset.top;
  console.log(targetX, targetY);
});

这个示例中，有一个带有两个子元素的容器(div#container)，这两个子元素(div.box)分别可以被点击。当点击这些子元素时，控制台会输出相应的相对坐标。在这个示例中，我们需要将目标元素的位置相对于容器的位置进行计算，所以使用了容器的偏移(containerOffset)和目标元素的偏移(targetOffset)。最后计算出目标元素相对于容器的位置(targetX和targetY)。