title: Javascript: how to prevent keypress used to dismiss alert from triggering key event handler
body: <p>I am creating a web-based experiment using Javascript / JQuery which requires users to give responses by pressing certain keys, but not others. If they press the wrong key, they are supposed to get an alert popup telling them that they pressed the wrong keys. The experiment should stop waiting for the next keypress while the alert is displayed, but go back to waiting once the alert is dismissed.</p>
  
  <p>The problem I'm having is that if the alert is dismissed by pressing the ENTER key, it seems to be registered by the key event handler, thus triggering another alert (because ENTER isn't one of the permitted keys), even though I thought I'd written it in such a way that the key event handler shouldn't be called until after the alert is dismissed. My question is, how to ensure that an ENTER keypress used to dismiss the alert will not be received by the subsequently called event handler?</p>
  
  <p>Here's some code:</p>
  
  <pre><code>function waitForKeypress( permittedKeys, callbackFn ) {
      returnFn = function(e) {
          $(document).unbind('keyup',returnFn);
          if ( permittedKeys.indexOf( e.which )!=-1 ) {
              callbackFn( { "success": true, "value": e.which } );
          } else {
              callbackFn( { "success": false } );
          }
      }
      $(document).keyup( returnFn );
  }
  
  var callback = function(data) {
      if ( data.success ) {
          goDoOtherStuff();
      } else {
          alert( "error message" );
          waitForKeyPress( permittedKeys, callback );
      }
  }
  
  waitForKeyPress( permittedKeys, callback );
  </code></pre>
  
  <p>I should explain that the reason I THOUGHT that an ENTER keypress used to dismiss the alert would not be received by the event handler in waitForKeyPress is because (I thought) Javascript should halt execution as long as the alert is displayed, so that the waitForKeyPress call inside the callback function should not go off until the alert has been dismissed, which is to say, after the ENTER key has been released.</p>
  
  <p>(My actual waitForKeyPress is more complicated than the above - it waits for PAIRS of key presses, with only certain pairs permitted, which is the reason why I needed to make it a separate function in the first place. I don't think the stuff I removed is related to my problem, though.)</p>
  
  <p>EDIT: some people suggested this might have to do with the event handler not being unbound properly. I'm sure this isn't the issue. Here's a much more concise example, where the event handler isn't even bound at all until after the alert, but the same issue arises:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  alert( "Hello world" );
  $(document).keyup( function() { alert( "Goodbye cruel world." ) } );
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Pressing ENTER to dismiss Hello World will immediately call up Goodbye cruel world.</p>