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

Question

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

检查这个小提琴

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

 document.getElementByID('elementID');

或者可能

document.getElementsByTagName('TagName');

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

Answer 1

您可以使用

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

Answer 2

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

Answer 3

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

$(el).offset();

相同：

var rect = el.getBoundingClientRect();

{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}

Answer 4

如果我理解正确：

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

Answer 5

我认为 offset() 应该可以工作。

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