javascript - 如何在焦点按钮上模拟“Space”或“Enter”键？

Question

在焦点按钮上，当用户点击“Space”或“Enter”键时，浏览器将在这些键盘事件之上合成一个点击事件。

我试图模拟 keydown，在焦点按钮上键入“Space”键，但找不到让浏览器合成点击事件的方法。

document.activeElement.dispatchEvent(new KeyboardEvent('keydown',{which: 32, keyCode: 32, key: ' ', code: 'Space'}));
document.activeElement.dispatchEvent(new KeyboardEvent('keyup',{which: 32, keyCode: 32, key: ' ', code: 'Space'}));

这是我到目前为止得到的https://jsfiddle.net/s21f9pg7/

const btn = document.querySelector('#btn');

btn.onclick = function(e) {
  console.log('click', e.type);
}
btn.onkeydown = function(e) {
  console.log('keydown', e.type);
}
btn.onkeypress = function(e) {
  console.log('keypress', e.type);
}
btn.onkeyup = function(e) {
  console.log('keyup', e.type);
}

setTimeout(() => {
  btn.focus();
  document.activeElement.dispatchEvent(new KeyboardEvent('keydown', {
    which: 32,
    keyCode: 32,
    key: ' ',
    code: 'Space'
  }));
  /* document.activeElement.dispatchEvent(new KeyboardEvent('keypress',{which: 32, keyCode: 32, key: ' ', code: 'Space'})); */
  setTimeout(() => {
    document.activeElement.dispatchEvent(new KeyboardEvent('keyup', {
      which: 32,
      keyCode: 32,
      key: ' ',
      code: 'Space'
    }));
  }, 200);
}, 200)

<button id="btn">click</button>

此代码段在焦点按钮上发出 keydown 和 keyup，没有触发点击事件。 但是，如果您手动按空格键，则会有一个单击事件以及键盘事件。

我正在尝试找到一种对焦点按钮进行单元测试的方法。感谢帮助！

标签： javascripthtml