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

使用 jQuery 确定目标元素上的点击坐标

为了捕获点击时相对于目标元素的鼠标坐标，jQuery 提供了多种方法来获得准确的结果。

event.pageX 和 event.pageY

event.pageX 和 event.pageY 属性提供相对于文档的鼠标指针位置。

Element.offset()

offset() 方法检索元素在文档中的偏移位置。

Element.position()

position() 方法确定元素在其父容器中的相对位置.

演示

考虑以下 JavaScript 代码：

jQuery("#seek-bar").click(function(e) {
    var posX = e.pageX - $(this).offset().left;
    var posY = e.pageY - $(this).offset().top;
    alert("X-coordinate: " + posX + "\nY-coordinate: " + posY);
});

此代码将计算并显示相对于目标元素的精确点击坐标。

示例 HTML

<div></div>

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