javascript - 如何获取点击元素的位置

Question

我的 dom 层次结构中有一个父 div，父 div 中有大约 100 个子元素。我在每个子元素上绑定了一个点击事件。我想要的是父元素顶部的子元素的位置。我使用 jquery .positionnd.offset但两者都从页面顶部返回位置。父 div 是可滚动的，这意味着流量是隐藏的。所以从点击元素的位置减去顶部位置是行不通的！谁能建议我解决这个问题！

Answer 1

给父元素添加position: relative;样式：

HTML：

<div style="position: relative">
    <div style="position: absolute; top: 200px; left: 200px;" id="clicker">Click Me</div>    
</div>

Javascript：

$(function() {
    $("#clicker").click(function() {
        var $clicker = $(this);
        var pos = $clicker.position();
       console.log(pos.top);
        console.log(pos.left);
    });
});

http://jsfiddle.net/LaEsw/

Answer 2

.offset()返回相对于文档.position()的位置，同时返回相对于偏移父级的位置。.position()将是您在这里想要的，但您需要将父级“定位”（具有position除、staticlike或之外的其他值）。否则，最近定位的父级将是文档本身，并且会像relativefixedabsolute.position().offset()

添加position:relative到要作为元素位置基础的父级。