js获取触发事件元素在整个网页中的绝对坐标(示例代码)

正常情况下，通过JavaScript获取元素坐标有两种方式：相对于视口的位置（即viewport）和相对于文档的位置。获取相对于整个文档的坐标，也被称为获取元素的绝对坐标。

方法一：使用element.getBoundingClientRect()

element.getBoundingClientRect()可以返回元素的大小及其相对于视口的位置。该方法返回一个DOMRect对象，该对象包含left、top、right和bottom属性，这些属性分别表示元素在视口中的位置。但是，要获得元素在文档中的位置，您还需要加上视口的滚动。

示例1：

const element = document.querySelector('#example');
const rect = element.getBoundingClientRect();
const absLeft = rect.left + window.scrollX;
const absTop = rect.top + window.scrollY;
console.log(`Element Absolute Position: (${absLeft}, ${absTop})`);

方法二：使用Element.offsetLeft和Element.offsetTop属性

另一种获取元素绝对位置的方法是使用Element.offsetLeft和Element.offsetTop属性。这些属性返回当前元素相对于其offsetParent元素的偏移量。您可以将Element.offsetParent搜索到根元素。但是，如果您使用此方法，需要小心，如果元素的祖先元素是定位元素或具有转换，那么它的offsetParent可能不是它的实际父级元素。此方法还不支持SVG元素。

示例2：

const element = document.querySelector('#example');
let absLeft = element.offsetLeft;
let absTop = element.offsetTop;
let current = element.offsetParent;
while (current !== null) {
  absLeft += current.offsetLeft;
  absTop += current.offsetTop;
  current = current.offsetParent;
}
console.log(`Element Absolute Position: (${absLeft}, ${absTop})`);

请注意，以上两种方法都只能获取固定或静态定位的元素的坐标。如果元素的样式为其他定位方式，例如相对定位或绝对定位，则结果可能不准确。此时，建议使用getComputedStyle和Window.getComputedStyle方法获取元素的样式对象，然后从样式对象获取元素的实际位置和大小。

总之，这是两种获取网页中元素绝对坐标的方法，可以根据需求灵活选择。