Double event on firefox on keydown event

Question

I don't understand why with Firefox when I launch keydown event with space my click event is also launched.

With enter no problem.

var eventFunction = function(e) {
  if (content.style.display === 'none' || content.style.display === '') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
}
button.addEventListener('click', function(e){
  console.log('click');
  eventFunction(e);
  this.removeEventListener('click', eventFunction, false);
}, false);
button.addEventListener('keydown', function(e) {
  console.log('keydown');
  if(e.keyCode === 13 || e.keyCode === 32) {
    eventFunction(e);
    e.stopPropagation();
    e.preventDefault();
    this.removeEventListener('keydown', eventFunction, false);
  }
}, false);

Demo here : https://jsfiddle.net/korigan/f371vcxx/

Answer 1

In Firefox, the click event is fired when you release the key. Listen for keyup to call preventDefault() on the second event:

 var button = document.querySelector('button'); button.addEventListener('click', function () { console.log('clicked'); }); button.addEventListener('keydown', function (e) { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); console.log('Space or Enter'); } }); button.addEventListener('keyup', function (e) { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); } }); 

 <button>Press me</button> 

Answer 2

e.stopPropagation(); does that you need. No click firing on key press.