如何在不使用事件的情况下获取元素的 pageX 和 pageY

How to get the pageX and pageY of an Element without using event

本文关键字：获取 情况下 元素 pageX pageY 事件      更新时间：2023-09-26

在不使用e.pageX和e.pageY的情况下，任何元素的定位都有。

检查这个小提琴

小提琴实际上是对我试图问的问题的糟糕尝试，但我认为视觉示例会更好。我想知道的是，是否可以通过使用引用来找到 DOM 上任何元素的 X 和 Y 坐标 

 document.getElementByID('elementID');

或者也许

document.getElementsByTagName('TagName');

编辑：虽然我在FIDDLE中使用了Jquery，但我想要一个仅使用JavaScript的可能解决方案。

您可以使用 

document.getElementById("elementID").offsetTop;
document.getElementById("elementID").offsetLeft;

请参考 MDN。它们返回父元素的偏移量。如果您需要元素相对于整个主体的偏移量，它可能会变得更加棘手，因为您必须对链中每个元素的偏移量求和。
分别对于.getElementsByTagName，因为 DOM 中的每个对象都有这些属性。

.getBoundingClientRect也值得一看。

var clientRectangle = document.getElementById("elementID").getBoundingClientRect();
console.log(clientRectangle.top); //or left, right, bottom


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

你可以在这里找到几乎所有的jquery内容：http://youmightnotneedjquery.com/

$(el).offset();

同： 

var rect = el.getBoundingClientRect();
{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}

我认为offset（）应该可以工作。

$(element).offset() //will get {top:.., left:....}

如果我理解正确：

UIEvent.PageX/PageY：相对于文档 （https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX）

Elem.getBoundingClientRect：相对于视口。（https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect）

Window.pageXOffset/pageYOffset：文档当前滚动的像素数。（https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX）

基于以下描述：

const PageX = (elem) => window.pageXOffset + elem.getBoundingClientRect().left
const PageY = (elem) => window.pageYOffset + elem.getBoundingClientRect().top
相关文章：