阻止回车和空格触发按钮的点击事件

这是一个同事和我说的，我还是第一次知道按钮还会触发键盘事件，按钮都没有地方可以输入，怎么会触发键盘的事件呢，但是现实就是可以触发，我又是一个假前端😅

原因

• 按钮也会获得焦点
• 点击以后按钮获得焦点就可以触发键盘任何的事件，但是很有意思的是就是只有回车和空格才会触发按钮的点击的事件

解决方法

知道了原因就知道了解决方法

禁用

最简单的就是按钮的禁用了，这个就什么都不会触发了

<button @click="click('点击触发')"
  :disabled="disabled"
>{{ disabled?'禁用了':'没有禁用' }}</button>

但是你项目里面那么多按钮，你不可能给每个按钮都加一个禁用，这个不太现实

移除焦点

按钮点击以后移除焦点

<button @click="click('点击触发')"
  ref="buttonRef"
>{{ disabled?'禁用了':'没有禁用' }}</button>

this.$refs.buttonRef.blur()

这个方法还是可以的，但是这样还是要一个一个加，让人头皮发麻

除非你说是一个新的项目，然后封装一个vue指令去解决这个问题，但是这样，你如果想要给按钮添加键盘事件就不行了，因为没有焦点，所以不会触发键盘事件，拆了东墙补西墙😅

全局阻止默认事件-推荐使用

window.addEventListener('keydown', (e:KeyboardEvent) => {
  if (e.path[0].nodeName === 'BUTTON') {
    console.log(e.code);
    if (['Space', 'Enter', 'NumpadEnter'].includes(e.code)) {
      e.preventDefault() // 阻止默认事件
    }
  }
})

只要在页面的一开始就加上这个代码，就可以全部阻止，不需要额外添加东西，也不会影响原有的点击功能

当然，如果你还要键盘事件，还可以自己添加键盘事件，也是可以正常触发的，自己添加的键盘事件就不会触发点击事件

最后

当然，这个基本不会出现，有谁会考虑按钮也可以触发键盘的事件呢，基本都是直接点了一下没下文了，不过我试过掘金的个人信息更新的按钮，也可以触发，键盘按着一直触发，一直发请求😅

欢迎关注公众号致心空间：O(∩_∩)O😁