如何正确获取相对于窗口的HTML元素边界框？

Question

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

显然，开始的地方是在mouseover事件处理程序中放置类似以下内容的代码：

var rect = e.target.getBoundingClientRect();

这很好，但是这给了我HTML文档坐标系中的rect，它相对于HTML绘图区域的左上角。我想使用panel.openPopup()在此图像附近显示一个xul:panel元素（但不使用预定义的弹出位置），因此需要转换坐标。

我尝试在XUL dom中执行以下操作以获取偏移量进行转换，对于一些网站它有效，但不是所有网站，而且似乎没有考虑边栏所需的x轴平移。

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

那么，最好的方法是什么？

注意：对于IE扩展，我会使用（也已经使用过）IDisplayServices :: TransformRect（） ——Firefox有类似的东西吗？

现在有赏金了！

- i_am_jorf

Answer 1

原来获取位置是无关紧要的，因为您可以使用类似以下方式将项目相对于元素定位：

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

- i_am_jorf