526互联

element-ui中的$comfirm点击取消后空格键和回车键依然执行删除操作

发布时间 2023-08-01 11:18:36作者: seven&night

原因： $comfirm会在上一次执行操作的按钮上自动聚焦选中如果这时点击回车或者空格键相当于又触发了一次删除按钮上的点击事件，而且默认回车和空格键会触发弹层上的确认按钮的点击事件，用户没有将鼠标定在确认按钮，这是组件自己封装的自动聚焦事件以及确认提交事件

解决方法：强制取消键盘的默认行为，在钩子（mounted）函数中 

  mounted() {
    window.addEventListener('keydown', e => {
      if (e.path[0].nodeName === 'BUTTON') {
        if (e.code === 'Space' || e.code === 'Enter') {
          e.preventDefault()
        }
      }
    })
  }