Firefox上的两次事件，在keydown事件上

Question

我不明白为什么在启动具有空格的keydown事件时也会启动click事件的Firefox。

随着输入没有问题。

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);

演示在这里： https : //jsfiddle.net/korigan/f371vcxx/

Answer 1

在Firefox中，释放键时会触发click事件。 侦听keyup以在第二个事件上调用preventDefault() ：

 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(); 您需要吗？ 按键时无点击触发。