Question

无论如何在不使用e.pageX和e.pageY的情况下定位任何元素。

选中此fiddle

小提琴实际上是对我试图提出的问题的一次不良尝试，但我认为一个视觉例子会更好。我想知道的是，是否可以通过引用

找到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也是worth a look。

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

Answer 2

＆＃13;

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

＆＃13;

Answer 3

如果我理解正确：

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 4

我认为offset（）应该有用。

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

Answer 5

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

$(el).offset();

与：

相同

var rect = el.getBoundingClientRect();

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

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

5 个答案: