offsetX,offsetY 和 pageX,pageY 有什么区别？答案

【问题标题】：What is the difference between offsetX,offsetY and pageX,pageY?offsetX,offsetY 和 pageX,pageY 有什么区别？
【发布时间】：2011-07-11 05:04:34
【问题描述】：

我需要一个弹出 div，它会出现在我点击的锚点的正下方。现在，我想确定锚点的 x 和 y 坐标 onClick 事件。这样做的最佳做法是什么？建议使用哪些事件属性？

【问题讨论】：

标签： javascript

【解决方案1】：

offsetX 和 offsetY 是相对于父容器的，而 pageX 和 pageY 是相对于文档的.不要将此与.offset() 和.position() 混淆，其中.offset() 与文档相关，.position() 与父容器的.offset() 相关。

类似这个例子的东西应该可以工作（JQuery）：

$('a').click(function(){
    var offset = $(this).offset();
    $('#popup_div').css('top',offset.top + 'px').css('left',offset.left + 'px').show();
});

http://api.jquery.com/offset/

http://api.jquery.com/position/

【讨论】：

这里的文档：(api.jquery.com/category/events/event-object/#post-850) 似乎表明 pageX/Y 是相对于文档，而不是窗口，如果页面已经滚动，这很重要。
使用 jQuery 完全是多余的，无法回答这个问题。信不信由你可以确定 x,y 坐标不需要 jQuery。
我的猜测是 El.pageY 是元素到文档顶部边缘的距离（以像素为单位），无论文档在上次渲染时可能包含什么内容。我将对此进行测试，看看它是否有效。如果滚动窗口或内容，文档的顶部边缘可能不可见。 pageY 在文档的最开始将为零，并且会增加向下移动到当前元素。
我错了。事实证明，DOM/JavaScript 设计者并没有提供一种简单的方法来在所有情况下确定文档位置。需要复杂的计算，它可能不起作用。见stackoverflow.com/questions/5598743/…。查找相对于某个最近的包含元素和相对于视口的位置都很容易。哇，不可思议。
这个答案是错误的 AFAICT。首先问题没有标记 jquery，第二个根据the spec offsetX 和 offsetY 不相对于任何父级，它们是相对于目标

【解决方案2】：

2 节选自 Jquery 文档网站

.position() 方法允许我们检索元素相对于偏移父元素的当前位置

http://api.jquery.com/position/

.offset() 方法允许我们检索元素相对于文档的当前位置。

http://api.jquery.com/offset/

【讨论】：