JavaScript: Key Event Handling after Assigning a Focus

Question

So, I just learned html/css/javascript last week, so I am not too savvy with it, and I am currently working on an app that uses the keyboard for navigation.

Anyways, I needed to create custom pop-ups and am running into a problem when trying to close them. To open the pop up, the user needs to hit 'ENTER' while selecting a menu item. From there the menu pops up, gives the close button focus, and is closed after hitting 'ENTER' when selecting either a 'close' or 'submit' item.

When the user tries to close the pop up, it closes, but then just ends up opening it again since the key event is not consumed by the closing function.

Currently, I have a key event function for onkeyup events in the document which enables navigation, then I have tried assigning the popup close function to onclick, onkeyup, and onkeypress, but regardless of which I try, pressing 'ENTER' always ends up reaching the main key event function after the popup closes.

My current quick fix is using two extra booleans, one which becomes true once the pop up closes, and the other which becomes true after the main key event function sees the first boolean become true (since having just the one boolean turn true after the window was closed still allowed the event to reach the main function for some reason).

Since I will need to have the same menu item selected upon leaving the popup, deselecting the menu item, saving it's place, then returning to it would also require more global variables.

I am mostly just wondering if there is a better way of doing this, since I do not want to have two extra global variables floating around...

Answer 1

Try using event.preventDefault (info here). Scroll down to section entitled "Prevent Default"

Answer 2

UPDATE: I've answered almost the same question just for pressing the space bar in different situations. There you go: Check it out.

---

Also, flags are not that bad. If you are concerned about the global namespace (which is a good practise) there are two things you can do.

1. functions are objects. They can have properties (static variables if you like) available on every call.

function handler() {
  if ( handler.opened ) {
    // close window
    // ...
    handler.opened = false;
  } else {
    // open window
    // ...
    handler.opened = true;
  }
}

// initialize property
handler.opened = false;