获取相对于窗口的 HTML 元素的边界框的正确方法是什么？答案

【问题标题】：What is the proper way to get bounding box for HTML elements relative to the Window?获取相对于窗口的 HTML 元素的边界框的正确方法是什么？
【发布时间】：2011-03-17 10:14:26
【问题描述】：

我正在编写一个 Firefox 扩展程序。我试图将其限制为 XUL+Javascript（无 XPCOM）。当我得到一个 HTML 元素的mouseover 事件时，我需要在 windows 坐标系中获取它的边界框（即内置的 XUL 文档 browser.xul）。

显而易见的起点是在 mouseover 事件处理程序中放置类似这样的内容：

var rect = e.target.getBoundingClientRect();

这很好，但这给了我 HTML 文档坐标系中的矩形，它是相对于 HTML 绘图区域的左上角的。我想在此图像附近使用 panel.openPopup() 显示 xul:panel 元素（但不使用预定义的popup positions 之一），所以我需要翻译坐标。

我已尝试执行以下操作（在 XUL dom 中）以获取偏移量来进行翻译，它适用于某些网站，但不是全部，并且似乎没有考虑到所需的 x 翻译侧边栏。

var appcontent = document.getElementById("appcontent");
if (appcontent) {
  chromeOffsetX = r.left;
  chromeOffsetY = r.top;
}

那么，解决这个问题的最佳方法是什么？

注意：对于 IE 扩展，我会使用（并且已经使用）IDisplayServices::TransformRect()——Firefox 是否有类似的东西？

现在有赏金！

【问题讨论】：

标签： javascript xul firefox-addon bounding-box

【解决方案1】：

This question 的代码可以计算出元素相对于可见窗口的 x 和 y。不确定它是否回答了您的问题。

【讨论】：

【解决方案2】：

事实证明获取位置无关紧要，因为您可以使用以下方式相对于元素定位项目：

hoverPanel.openPopup(someElement, "overlap", offsetX, offsetY, false, false);

【讨论】：