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

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

解决方法:强制取消键盘的默认行为,在钩子(mounted)函数中 

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

 

posted @ 2023-08-01 11:11  seven&night  阅读(208)  评论(0编辑  收藏  举报