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

在 Web 开发中，我们经常需要获取用户在页面上点击某个元素的位置，特别是需要实现一些拖拽、放大缩小等交互效果时，该功能变得尤为重要。使用 JQuery 可以很方便地实现该功能。

准备工作

在使用 JQuery 获取目标元素上的相对点击坐标前，需要先引入 JQuery 库。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

获取相对坐标

使用 JQuery，可以通过事件对象获取到鼠标在页面中的绝对坐标，再利用目标元素在页面中的绝对坐标，即可计算出目标元素上的相对坐标。

以下是一个示例代码，假设有一个图片元素：

<img id="myImg" src="example.jpg" alt="example image">

我们要获取用户在该图片上点击的位置坐标，可以在该元素上绑定 click 事件，然后在事件回调函数中获取相对坐标。代码如下：

$("#myImg").click(function(e) {
  var posX = e.pageX - $(this).offset().left;
  var posY = e.pageY - $(this).offset().top;
  console.log("点击位置的相对坐标为：" + posX + "，" + posY);
});

解释一下代码：

• e.pageX 和 e.pageY 分别代表鼠标在页面中的绝对坐标。
• $(this).offset().left 和 $(this).offset().top 表示目标元素在页面中的绝对坐标。
• 相减即可得到相对坐标。

总结

使用 JQuery 可以很方便地获取目标元素上的相对点击坐标，通过这种方式，我们可以实现一些有趣的交互效果，给用户更好的使用体验。