javascript - 如何计算点击事件时嵌套元素相对于其父元素的位置

Question

我设置了一个示例，我想计算嵌套元素相对于其父元素的位置。

例如http://jsfiddle.net/45cJZ/在此示例中，关于单击事件，我需要计算嵌套 div 元素相对于其父元素的位置，即 .wrapper 类。

可以使用.offsetParent() 来完成此操作

Answer 1

将 position:relative 添加到 .wrapper(使其成为位置计算的父级)并使用 .position()获取被点击元素相对于 .wrapper

的位置

HTML

<div class="wrapper">
    <div class="div1"></div>
    <!-- ... -->
</div>

CSS

.wrapper {
    /*...*/
    position: relative;
}

Javascript

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

演示:http://jsfiddle.net/8d62J/