offsetX，offsetY和pageX，pageY有什么区别？

Question

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

Answer 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/

Answer 2

来自Jquery文档网站的2个摘录

  

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

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

---

  

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

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