What is the proper way to get bounding box for HTML elements relative to the Window?

问题

I'm writing a Firefox extension. I'm trying to limit it to just XUL+Javascript (no XPCOM). When I get a mouseover event for an HTML element, I need to get its bounding box in the windows coordinate system (that is the built-in XUL document browser.xul).

The obvious place to start is to put something like this in the mouseover event handler:

var rect = e.target.getBoundingClientRect();

Which is great, but that gives me the rect in the HTML document's coordinate system, which is relative to the upper left corner of the HTML drawing area. I want to display a xul:panel element using panel.openPopup() near this image (but not using one of the predefined popup positions), so I need to translate the coordinates.

I've tried doing the following (in the XUL dom) to get the offset's to do the translation, and it works for some sites, but not all, and doesn't seem to take into account the x translation needed for sidebars.

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

So, what's the best way to approach this?

Note: for IE extensions I would use (and have used) IDisplayServices::TransformRect()—is there something similar for Firefox?

Now with bounty!

回答1:

This question has code that works out the x and y of an element relative to the visible window. Not sure if it answers your question.

回答2:

Turns out getting the location is irrelevant because you can position items relative to the element using something like:

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

来源：https://stackoverflow.com/questions/3273031/what-is-the-proper-way-to-get-bounding-box-for-html-elements-relative-to-the-win