How to catch the escape key that closes a YUI menu?

Question

I'm doing some stuff with YUI menus, which is basically working fine. When I raise the menu through a keyclick on a button, I do some coloring of some DIVs to create a particular menu effect. Clicking on the button again closes the menu and undoes the coloring, and all's well.

My problem is that hitting the escape key also closes the menu, but without running undo-the-coloring code, and so I end up with some leftover gunk on the screen. How can I trap the pressing of the escape key so that I can run some code to clean up after the now-removed menu? Thanks!

score 0 · Answer 1 · answered Mar 30 '12 at 00:12

Here's one way, anyway:

If you're doing this, you will have some code somewhere that builds the YAHOO.widget.Menu, renders it, and probably attaches some listeners to the widget that, when clicked on, presents the menu. In with that code, I added the following:

    var escapeWatcher = function(e) {
        var the_key = e.keyCode;
        if (the_key == 27) {
            $('#widgetholder').css({ 'backgroundColor' : 'transparent' });      }
    };
    YAHOO.util.Event.addListener('widgetholder', 'keydown', escapeWatcher);

In other words: attach a keydown listener to the widget, which runs escapeWatcher when a key is hit. That function checks to see if the pressed key was Escape, and, if so, adjusts the background color of the widget. Other suggestions are welcome, but this is currently working for me.

How to catch the escape key that closes a YUI menu?

1 Answers1