jQuery: ESC queue

Question

I am working on a huge app, that is using some sub menus, modal windows, tips, etc.

Now, what I'd like to know it the proper way to handle Esc and click outside events in such an app.

$(document).keyup(function(e) {
    if (e.keyCode == 27) { ... } 
});

This I use for handling Esc key press... this would be simple if there was only one event to fire...

but consider this: 1. click opens a modal window 2. click inside the modal window opens a drop down menu 3. mouseover a menu item opens a tooltip

now, when pressing Esc, first the tooltip should close, pressing again the menu should close and at last, the modal window closes

what the proper way to handle this?

Similar goes for clicking outside...

if you click outside the modal window, whole modal window should close (including menu and tooltip) clicking on modal window but outside the menu, should close the menu and the tooltip

Answer 1

For every window, dialog, etc that is opened it's added to a page level (global) stack.

The document.keyup event, when receiving the ESC press then pops the last item off the stack, and closes it.

Ideally, this can be refined to invert control, so the document.keyup, just passes the event to the last item on the stack, and it handles closing itself, and removing itself from the stack.

You also have to track and remove from the stack items that are closed in another manner, this is where inverting control would be beneficial.