Spacebar按键触发异常：点击按钮后按空格执行对应按钮绑定函数如何修复

问题原因 #

这是浏览器原生默认行为：按钮被点击后会进入聚焦状态，聚焦的可交互元素（如按钮）按下空格键时，浏览器会自动触发该元素的click事件，触发优先级高于全局绑定的keydown自定义逻辑。

可选修复方案 #

方案1：点击按钮后主动失焦（侵入性最小） #

点击按钮后立刻让按钮失去焦点，从根源避免后续空格触发按钮点击，不需要修改全局JS代码，仅修改HTML即可：

<button onclick="x('button');this.blur()"> x </button>
<button onclick="spacebar();this.blur()"> spacebar </button>

方案2：全局拦截按钮的空格默认行为（适合按钮数量多的场景） #

在全局keydown监听中新增判断，只要是按钮触发的空格按键，直接阻止浏览器默认的触发点击行为，不需要修改HTML代码：

const x = str => console.log(str);
const spacebar = () => console.log('space');

document.addEventListener("keydown", function(event) {
  // 新增拦截逻辑
  if (event.target.tagName === 'BUTTON' && event.key === ' ') {
    event.preventDefault();
  }
  if (event.key === '1') {
    x(event.key);
  }
  if (event.key === ' ') {
    spacebar();
  }
})

方案3：给指定按钮单独加空格拦截 #

如果只需要屏蔽部分按钮的空格触发行为，可以给对应按钮单独绑定键盘事件拦截：

<button onclick="x('button')" onkeydown="if(event.key===' ') event.preventDefault()"> x </button>

内容的提问来源于stack exchange，提问作者InternetGuy