javascript 如何在不使用事件的情况下获取元素的 pageX 和 pageY
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19999635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the pageX and pageY of an Element without using event
提问by MarsOne
Is there anyway to the positioning of any element without using e.pageX and e.pageY.
无论如何，是否可以在不使用 e.pageX 和 e.pageY 的情况下定位任何元素。
Check this fiddle
检查这个小提琴
The fiddle is actually a poor attempt at what im trying to ask, but i though a visual example would be better. What i want to know is, Is it possible to find the X and Y co-ordinates of any element on the DOM by referencing using
小提琴实际上是我试图提出的问题的糟糕尝试，但我认为视觉示例会更好。我想知道的是，是否可以通过引用来找到 DOM 上任何元素的 X 和 Y 坐标
document.getElementByID('elementID');
or maybe
或许
document.getElementsByTagName('TagName');
EDIT:Although i have used Jquery in the FIDDLE, I would like a possible solution using only JavaScript.
编辑：虽然我在 FIDDLE 中使用了 Jquery，但我想要一个仅使用 JavaScript 的可能解决方案。
回答by Basti M
You may use
您可以使用
document.getElementById("elementID").offsetTop;
document.getElementById("elementID").offsetLeft;
Refer to MDN. They return the offset from the parent element. If you need the offset of the element in respect to the whole body it may get more tricky, as you will have to sum the offsets of each element in the chain.
Respectively for .getElementsByTagName, as each object in the DOM has these attributes.
参考MDN。它们返回父元素的偏移量。如果您需要元素相对于整个身体的偏移量，它可能会变得更加棘手，因为您必须对链中每个元素的偏移量求和。
分别为.getElementsByTagName，因为 DOM 中的每个对象都具有这些属性。
.getBoundingClientRectis also worth a look.
.getBoundingClientRect也值得一看。
var clientRectangle = document.getElementById("elementID").getBoundingClientRect();
console.log(clientRectangle.top); //or left, right, bottom
回答by Lauris Kuznecovs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#something").click(function(e){
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});
</script>回答by kitimenpolku
If Im understanding right:
如果我理解正确：
UIEvent.PageX/PageY: relative to the document (https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX)
UIEvent.PageX/PageY：相对于文档（https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX）
Elem.getBoundingClientRect: relative to viewport.(https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
Elem.getBoundingClientRect：相对于视口。（https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect）
Window.pageXOffset/pageYOffset:number of pixels that the document is currently scrolled. (https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX)
Window.pageXOffset/pageYOffset：文档当前滚动的像素数。( https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX)
Based on the following description:
基于以下描述：
const PageX = (elem) => window.pageXOffset + elem.getBoundingClientRect().left
const PageY = (elem) => window.pageYOffset + elem.getBoundingClientRect().top
回答by rufreakde
You can find almost all jquery stuff here: http://youmightnotneedjquery.com/
你可以在这里找到几乎所有的 jquery 东西：http: //youmightnotneedjquery.com/
$(el).offset();
the same as:
等同于：
var rect = el.getBoundingClientRect();
{
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
回答by Andrew
I think offset() should work.
我认为 offset() 应该有效。
$(element).offset() //will get {top:.., left:....}
