Question

当我用空间启动keydown事件时，我不明白为什么使用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()：

＆＃13;

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

＆＃13;

<button>Press me</button>

＆＃13;

Answer 2

e.stopPropagation();可以满足您的需求。按下按键没有点击。

关于keydown事件的firefox上的双重事件

2 个答案: