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

在解决这个问题之前,我查了一下其他文章,了解到$comfirm会在上一次执行操作的按钮上自动聚焦选中

可见第一排删除按钮是选中状态

如果这时点击回车或者空格键相当于又触发了一次删除按钮上的点击事件,而且默认回车和空格键会触发弹层上的确认按钮的点击事件,用户没有将鼠标定在确认按钮,这是组件自己封装的自动聚焦事件以及确认提交事件,将两张图的颜色对比一下就可以看出来选中的状态

按钮选中状态的颜色较浅
未选中状态颜色较深

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

强制取消自定义事件

钩子函数mounted,DOM第一次被渲染出来的时机,也就是操作DOM的最早时机

updated钩子也可以实现,这是可以操作最新的DOM元素的时机


解决方案二:给按钮添加失去焦点事件

 打印event.path的结果,可以通过find锁定组件封装的button按钮,并给其添加失去焦点的事件

控制台打印结果

具体代码如下:

给button绑定失去焦点事件
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容