How can we determine how to move the mouse to a popup window?

In the article building a web Menu Using the popup window, I have described in detail how to use the popup window and some precautions. Today I found it quite depressing to determine whether to move the mouse into a popup window, but finally I found a solution.

Why is it necessary to determine whether a mouse action is moved into a popup window? When we move the mouse over a toolbar, a focus effect is generated when the mouse moves into each button. Move the mouse to resume. However, if we click the button, and the button is the kind of pop-up drop-down menu, we hope that the focus effect on the button should not be resume while moving the mouse into the menu. In this case, you need to determine whether the mouse is moved into a popup window (the menu is made using popup), rather than the normal onmouseout. As shown in:

If we execute normal onmouseout on the toolbar button, we will not be able to get the effect of Figure 4, and the button will be resume like Figure 2. I wanted to add some status values to the clicked button. However, if we used the ESC key to hide the menu, there is no way to display the status in the resume button. Finally, we found that a bunch of parameters in the event can help us determine the moving status of the mouse, event. srcelement is one of the most commonly used attributes, and event also provides two element parameters. One is toelement and the other is fromelement, as the name suggests, Which is the source and target hmtl elements of event triggering. I remember that in the article "popup build menu", I analyzed the relationship between the Document Object of the host window and the Document Object of the popup, because they are independent document objects, the srcelement, toelement, and fromelement of the event object must come from the same doucment object. So when one mouse moves from host upload Doc ument to popup. doucment, event. toelement will be null! If the mouse moves from popup to host window, this event. toelement will also be null.

According to the above analysis, the onmouseout on the button element can accurately judge the mouse status, for exampleCodeAs follows:

Xxxbutton. _ onmouseout =   Function ()
{
VaR EVT =   This . Document. parentwindow. event;
If (EVT)
{
If (EVT. toelement && EVT. fromelement)
{
// This is a normal onmouseout status
}
Else
{
// This is the status of the mouse entering the popup window
}
}
};

Another consideration is: Is it possible that a mouse event has only toelement, but not fromelement?

Of course there may be. In the above case, if onmouseover is intercepted in popup, there will be no fromelement. Of course, even if there is no popup window in the browser, we may also encounter the case that the fromelement of event is empty. We convert the browser from non-active to active (especially when Alt + tab is used ), if the mouse cursor falls on an element in the browser that responds to onmouseover, The onmouseover event will also be triggered. In this case, only the toelement and srcelement values in the event object are available, fromelement is empty.