Javascript 如何在单击事件时计算嵌套元素相对于其父元素的位置

我已经建立了一个例子，我想计算嵌套元素相对于它的父元素的位置

例如，在这个单击事件的示例中，我需要计算嵌套的div元素相对于其父元素的位置，即

.wrapper

类

---

可以使用

.offsetParent（）

将

位置：相对

添加到

.wrapper

（使其成为位置计算的父对象）并用于获取单击元素相对于

的位置。wrapper

HTML

Javascript

$(".wrapper").children().on("click", function() {
    console.log($(this).position());
});

演示：

您可以使用jQuery获取元素相对于其父元素的坐标。下面是您的编辑，以显示.position（）的功能。只需更改类即可查看警报的更改。你所要做的就是：

var p = $(".div2").position();
alert("Left: " + p.left);
alert("Top: " + p.top);

---

@安德烈亚斯的回答是最好和正确的，但由于您提到了偏移量，您可以看到它是如何工作的

$('.wrapper div').on('click', function (event) {
    var myOffset = $(this).offset();
    var myParentOffset = $(this).parent().offset();

    console.log(myOffset, myParentOffset);
    var topDiff = myOffset.top - myParentOffset.top;
    var leftDiff = myOffset.left - myParentOffset.left;
    console.log(topDiff, leftDiff);
});

---

演示：

您尝试了什么，您是否阅读了offsetParent的文档？我现在正在尝试，并使同一链接过期。我将非常乐意自己做。谢谢你，我一直在玩这个例子。。查看如何使用

position（）

var p = $(".div2").position();
alert("Left: " + p.left);
alert("Top: " + p.top);

$('.wrapper div').on('click', function (event) {
    var myOffset = $(this).offset();
    var myParentOffset = $(this).parent().offset();

    console.log(myOffset, myParentOffset);
    var topDiff = myOffset.top - myParentOffset.top;
    var leftDiff = myOffset.left - myParentOffset.left;
    console.log(topDiff, leftDiff);
});