offsetX，offsetY和pageX，pageY有什么区别？ [英] What is the difference between offsetX,offsetY and pageX,pageY?

问题描述

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

I need a popup div that will appear right below the anchor that i clicked. Now, I want to determine the x and y coordinates onClick event of an anchor. What's the best practice of doing it? What are the advisable event properties to use?

推荐答案

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

offsetX and offsetY are relative to the parent container, whereas pageX and pageY are relative to the document. Don't confuse this with .offset() and .position(), in which .offset() is relative to the document and .position() is relative to the parent container's .offset().

像这样的例子应该有用（JQuery）：

Something like this example should work (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/

这篇关于offsetX，offsetY和pageX，pageY有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！