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()
        }
      }
    })
  }
复制代码

 

本文作者:seven&night

本文链接:https://www.cnblogs.com/bisiyuan/p/17595985.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   seven&night  阅读(252)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
  1. 1 晴天 刘瑞琦
晴天 - 刘瑞琦
00:00 / 00:00
An audio error has occurred.