I am creating a firefox extension and cannot find a way to receive mouseenter and mouseleave events when the mouse pointer moves from window to window.
First I will explain what the extension is doing to make the exact situation clear, because the details may matter. When the user wants to learn about a "term" (word, phrase, acronym) in the firefox browser, he moves the mouse pointer to that term and pauses the mouse pointer over that term.
The javascript extension code calls window.open() to display a small, borderless popup window (that looks similar to a tooltip) just above the term. This "clarify window" explains and describes the term with a single line of text.
If the user wants to clarify a term in this "clarify window", he simply moves and pauses the mouse pointer over that term. This displays another "clarify window" just above the first "clarify window" with information about this second term. Obviously the extension javascript code is running in the "clarify windows" in addition to the main firefox browser window.
To make a "clarify window" vanish, the user simply moves the mouse pointer outside that window.
To make this work properly the extension javascript code needs to receive events when the mouse pointer exits one window and enters another. This is what I have not been able to make work properly.
The extension javascript code calls either of the following pairs of lines:
1: window.addEventListener("mouseover", meanings.onmouseover, true);
1: window.addEventListener("mouseout", meanings.onmouseout, true);
2: window.document.documentElement.addEventListener("mouseenter", meanings.onmouseenter, false);
2: window.document.documentElement.addEventListener("mouseleave", meanings.onmouseleave, false);
When I enable the first pair of events, too many events seem to be generated, and the event.target, event.currentTarget, event.relatedTarget all seem to be various element nodes in the document, which is not helpful because we only care about moving between windows, not between elements in a page.
When I enable the second pair of lines the general behavior seems better in the sense that excess events within the windows seem to not be generated (only at the outer boundary of the window, which is desired). When the mouse cursor enters or leaves the main browser window, the appropriate event handler functions are called. Also, when the mouse pointer enters any popup "clarify window", the appropriate event handler function is invoked. However, when the mouse pointer leaves any popup "clarify window", no event handler is invoked (regardless of whether the mouse pointer moves into another "clarify window" or the main browser window).
Also, the event.relatedTarget property is always null - it does not contain the window or document the mouse pointer moved into on "mouseenter", or the window or document the mouse pointer moved out of on "mouseleave".
I can't believe how much time I've spent on this, as this has to be a common need or requirement in many applications. Nonetheless, I'm flailing, trying to find an approach that works.
How can I achieve what I need?