title: Key Event happening twice when pressed with another key
body: <p>In my game, I use the event listeners <code>keyup</code> and <code>keydown</code> to track which keys are pressed (<code>this.input</code> is a reference to the <code>Input</code> function below):</p>
  
  <pre><code>$(document.body).on('keydown', this.input.keyPress.bind(this.input));
  $(document.body).on('keyup', this.input.keyPress.bind(this.input));
  </code></pre>
  
  <p>Everything works as expected, until I press 2 keys at once. The left key moves the player left, the shift key fires a weapon. Separately, they work fine. If both are pressed at once, however, and held, the player shoots twice.</p>
  
  <p>Here is the code I am using to handle the inputs (removed other key events for brevity)</p>
  
  <p><code>shootSpecial</code> should only be called once since <code>keyMap.shift</code> is only <code>true</code> on <code>keydown</code>. Once <code>keyup</code> is triggered, it is set to <code>false</code>:
  <code>keyMap[key] = e.type === 'keydown';</code></p>
  
  <pre><code>var Input = function () {
    var keyMap = {};
  
    this.handleKeyPress = function () {
      if (keyMap.arrowleft === true) {
        game.player.moving.left = true;
      } else if (keyMap.shift === true) {
        game.player.shootSpecial();
      }
    };
  
    this.keyPress = function (e) {
      var key = e.key.toLowerCase();
      if (key === ' ') {
        key = 'space';
      }
      keyMap[key] = e.type === 'keydown';
      console.log(key, keyMap[key]);
      this.handleKeyPress();
    };
  };
  </code></pre>
  
  <p>The <code>console.log</code> reports that <em>left</em> and <em>shift</em> are <code>true</code> on <code>keydown</code> and then both <code>false</code> on <code>keyup</code> so I'm not too sure why it would be triggering the <code>shootSpecial</code> event twice.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var keyMap = {};
  var handleKeyPress = function () {
    if (keyMap.arrowleft === true) {
      console.log('left');
    } else if (keyMap.shift === true) {
      console.log('shift');  
    }
  };
  
  var keyPress = function (e) {
    var key = e.key.toLowerCase();
    keyMap[key] = e.type === 'keydown';
    if (document.getElementById(key))
      document.getElementById(key).innerText = e.type === 'keydown';
    
    handleKeyPress();
  }
  
  document.addEventListener('keydown', keyPress);
  document.addEventListener('keyup', keyPress);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>LEFT:&lt;div id="arrowleft"&gt;false&lt;/div&gt;
  SHIFT:&lt;div id="shift"&gt;false&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see by the fiddle, one event gets called twice.</p>