title: Keypress Event triggering several events
body: <p>I have a button and a series of text fields. I am trying to facilitate keyboard navigation. Here is what I have:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button id="button1"&gt;Click me&lt;/button&gt;
  &lt;input type="text" id="field1" name="field1"&gt;
  &lt;input type="text" id="field2" name="field2"&gt;
  &lt;input type="text" id="field3" name="field3"&gt;
  </code></pre>
  
  <p><strong>JS/JQUERY v 1.9.1</strong></p>
  
  <pre><code>/* If they click the button */
  $('#button1').on('click', function() {
      moveToNextInputField(); /* &lt;-- Mystical function to "focus" the next input */
  });
  /* If they hit "enter" on the button */
  $('#button1').on('keyup', function(e) {
      if (e.which === 13) {
          moveToNextInputField();
      }
  });
  /* Capture keyboard input to limit to Numbers */
  $('input').on('keydown', function (e) {
      switch(e.which) {
          case 48:
          case 49:
          case 50: /* All numbers, or wanted keys, etc.... */
              $(this).data('changed', true);
              break;
          default:
              e.preventDefault();  /* prevent other unwanted keys from doing anything */
              break;
      }
  });
  /* Capture keyboard input for keyboard navigation */
  $('input').on('keyup', function (e) {
      switch (e.which) {
          /* other cases to do stuff excluded */
          case 13:
              moveToNextInputField();
              break;
      }
  });
  </code></pre>
  
  <p>The problem I am having is that in Firefox and IE10 (possibly others), When I select the button and press "ENTER" it triggers 2 events.  The first event moves the focus to the next field, and the second does the same thing. It appears that I cannot press the "ENTER" key fast enough.  When I run this code and press "enter" on the button I end up in field2.</p>
  
  <p>So to my question: Is it possible to "lock" an event so that it only triggers 1 event instead of several?  </p>
  
  <p>As a side note, if there is a better way to do this I'm all ears.</p>
  
  <hr>
  
  <p><strong>Solution:</strong></p>
  
  <p>I found my answer was a combination of things recommended.</p>
  
  <ol>
  <li>I did get rid of $('#button1').on('keyup'....).  It was redundant.</li>
  <li>I added e.stopImmediatePropigation() within the $('#button').click(...) function. This solved my problem.  </li>
  </ol>
  
  <p>Here is what the solution that worked looks like:</p>
  
  <pre><code>/* If they click the button or press ENTER while focused */
  $('#button1').on('click', function(e) {
      e.stopImmediatePropigation(); 
      moveToNextInputField(); /* &lt;-- Mystical function to "focus" the next input */
  });
  
  /* Capture keyboard input to limit to Numbers */
  $('input').on('keydown', function (e) {
      switch(e.which) {
          case 48:
          case 49:
          case 50: /* All numbers, or wanted keys, etc.... */
              $(this).data('changed', true);
              break;
          default:
              e.preventDefault();  /* prevent other unwanted keys from doing anything */
              break;
      }
  });
  /* Capture keyboard input for keyboard navigation */
  $('input').on('keyup', function (e) {
      switch (e.which) {
          /* other cases to do stuff excluded */
          case 13:
              moveToNextInputField();
              break;
      }
  });
  </code></pre>
  
  <p>Thanks all for the help.. Hopefully this helps someone else too.
  Cheers.</p>