在 JavaScript 中处理显示对话框/模式的最有效方法是什么？

Question

[UPDATE:] here is a link to test (if you don't want to clone the repo) http://jsfiddle.net/integralist/g9EPu/

I've got a lot of dialogs/modals that need to be displayed when mousing over certain links in a web app.

Table of content (tl;dr)

• How I used to do handle it
• How I've tried it recently
• Which is better?
• What about mouseenter/leave?

How I used to do handle it

The way I usually do this is to use event delegation.

So I add one event handler to a container and then check for the relevant element to become the target and then display the relevant dialog.

I normally have one dialog which I change the content for and re-position (saves having lots of different HTML mark-up).

If the mouseover event (for the link) gets triggered then I display the dialog.

If the mouseout event (for the link) gets triggered then I hide the dialog.

If I mouseout of the link which triggered the event handler then I normally need to set a timer to delay hiding the dialog (just long enough) so I can then mouseover the dialog which itself clears the timer set by the mouseout of the link.

I then have a mouseout event bound to the dialog so I can then hide the dialog when the user rolls their mouse off the dialog.

There are two problems I've encountered at this stage, the first happens practically all the time and the other is an edge case I noticed recently which prompted me to try and find a better solution...

1. The dialog has 'x' number of child elements and rolling the mouse over a child element causes the mouseout event for the dialog to be triggered hence I need to put in checks to see if the element has a parent which is the dialog itself and if so then don't try to hide the dialog.

2. When using this technique on a <table> element I've found that when the mouse moves too quickly the mouseout/over events don't get triggered.

How I've tried it recently

For example code see: https://github.com/Integralist/Mouse-Over-Out-Script (you should be able to just clone the repo and run the index.html file locally to see what's happening)

But to give a brief explanation...

We bind a mousemove event to the document.documentElement element (but you could do it on the document.body if you wanted) and then we store the x/y co-ordinates of the mouse position. We provide public API access to a 'check' method which lets us know if the position of the mouse is over the element we've provided to 'check' (we measure the elements dimensions and add those onto its x/y co-ordinates).

In the above repo we have a calendar which shows a dialog whenever a particular date has an event on. We're storing all <td>'s that have an event and we set-up a timer for each of those <td>'s (this is because we need to keep calling the 'check' method to see if that <td> has the mouse over it).

So potentially there could be 31+ (because we're showing the first few days of the following month) opportunities for a dialog to be shown and so 31+ timers set!

This example repo works now, where as the first version where I was using event delegation wasn't.

Which is better?

I'm worried about performance on the mousemove version because it can potentially use a lot of timers (depending on how many dialogs you need in a single page). In my calendar example above there is up to 31+ timers that could be running!

What about mouseenter/leave?

I know these events exist and if all browsers supported it then I could safely use the first version and not have to check for child elements causing erroneous mouseout/over events to be triggered. But regardless I don't believe this would have fixed the example with the event calendar where moving the mouse too quickly was meaning the mouseout/over events for the <td>'s weren't being triggered by the browser. Either way, I know you can polyfill this as jQuery provides mouseenter/leave events but looking through their code I couldn't get that to work for my script (as I don't use jQuery or any other general purpose library - ps, and I don't wish to, so please do not suggest that as an option).

Many thanks for any help/advice or guidance someone can provide me.

Answer 1

The dialog has 'x' number of child elements and rolling the mouse over a child element causes the mouseout event for the dialog to be triggered hence I need to put in checks to see if the element has a parent which is the dialog itself and if so then dont try to hide the dialog.

To solve this: in your event code, simply use the function "isAncestor" (see below)

/*
 * element = the "target" in your mouseout event handler
 * other = the node you really want to check if you're over
 */
isAncestor: function(element, other)
{
    while ( element && element != other ) element = element.parentNode;
    return ( element != null && element != undefined );
}

So in your mouseout code for your element (let's call it "itemElement"), you'd check it like:

//We're really mousing out, close dialog
if ( !isAncestor( mouseOutEvent.target, itemElement ) )
{
    ...do something ...
}