title: Javascript/jQuery prevent double event triggers
body: <p>I have an html form.</p>
  <ol>
  <li>It uses keyboard navigation (with arrow keys) to move between fields including the <kbd>enter</kbd> key.</li>
  <li>It periodically needs to prompt the user for acceptance of information.</li>
  <li>The enter key is picked up on both the button and in the form field.</li>
  </ol>
  <p>Problem: When the user hits <kbd>ENTER</kbd> on the accept button it is triggering double events in my form.  Shifting the focus 2 fields instead of 1.</p>
  <p>I have code that demonstrates exactly what I'm talking about here:</p>
  <p>Original Post <strike>http://jsfiddle.net/mcraig_brs/UgUUr/1/</strike></p>
  <p>Modified Post <a href="http://jsfiddle.net/mcraig_brs/UgUUr/2/" rel="nofollow noreferrer">http://jsfiddle.net/mcraig_brs/UgUUr/2/</a></p>
  <p>Here is the sample HTML:</p>
  <pre><code>&lt;button id=&quot;myButton&quot;&gt;Press Enter On Me&lt;/button&gt;&lt;br&gt;
  &lt;input type=&quot;text&quot; id=&quot;text1&quot; class=&quot;tInput&quot; data-index=&quot;0&quot;&gt;&lt;br&gt;
  &lt;input type=&quot;text&quot; id=&quot;text2&quot; class=&quot;tInput&quot; data-index=&quot;1&quot;&gt;&lt;br&gt;
  &lt;input type=&quot;text&quot; id=&quot;text3&quot; class=&quot;tInput&quot; data-index=&quot;2&quot;&gt;&lt;br&gt;
  &lt;div id=&quot;log&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>Here is the sample JS:</p>
  <pre><code>function log ( data ) {
      $('#log').append(data + &quot;&lt;br&gt;&quot;);   
  }
  function focusOn(index) {
      log(&quot;focusOn(index): &quot; + index);
      $('input.tInput').eq(index).focus();   
  }
  function focusNext( currentIndex ) {
      log(&quot;focusNext(currentIndex):&quot; + currentIndex);
      focusOn(currentIndex + 1);
  }
  function focusPrevious (currentIndex) {
      log('focusPrevious(currentIndex):' + currentIndex);
      focusOn(currentIndex - 1);
  }
  $('#myButton').on('click', function(e) {
      log(&quot;event:click #myButton&quot;);
      focusOn(0);
  });
  $('input.tInput').on('keyup', function(e) {
      switch (e.which) {
          case 13:
              log(&quot;event:ENTER key in input.tInput&quot;);
              focusNext($(this).data('index'));
              break;
          case 38:
              log(&quot;event:UP ARROW key in input.tInput&quot;);
              focusPrevious($(this).data('index'));
              break;
          case 40:
              log('event:DOWN ARROW key in input.tInput');
              focusNext($(this).data('index'));
              break;
      }   
  });
  </code></pre>
  <p>When I press &quot;ENTER&quot; while the focus is on the button in the current code I get the following output in the log div:</p>
  <pre><code>event:click #myButton
  focusOn(index): 0
  event:ENTER key in input.tInput
  focusNext(currentIndex):0
  focusOn(index): 1
  </code></pre>
  <p>(At the moment in jsFiddle the only way I can get to the button is to focus on the first text field and <kbd>shift</kbd>+<kbd>tab</kbd> back to it so it has focus, so that I can press <kbd>ENTER</kbd> on it. But in the live code it is automatically focused for the user.)</p>
  <p>Question: How can I prevent this type of double event from triggering?  I have tried <code>e.stopPropagation()</code> but that did not yield the results I was looking for.  When the user pressed <kbd>ENTER</kbd> I want the focus to advance only one field.</p>
  <p>I have been wrestling with this for a few days so any help would be greatly appreciated. Please note that if a user clicks on the button with the mouse it works properly, it is only the <kbd>ENTER</kbd> key that triggers the double event.</p>
  <p>Note: I had to modify my question slightly to better convey the constraints.</p>