您现在的位置是:网站首页> 编程资料编程资料
Vue中keyup.enter和blur事件冲突的问题及解决_vue.js_
2023-05-24
438人已围观
简介 Vue中keyup.enter和blur事件冲突的问题及解决_vue.js_
keyup.enter和blur事件冲突问题
在写这个业务时,遇到了一个回车和blur冲突的问题,按了回车,导致了input也算失去了焦点,导致连续触发2次handleInputConfirm(row,$index)这个函数。
解决方法
//将回车触发的方法改为去触发元素的blur事件 这样就不会重复触发了。
keyup.enter和blur同时触发如何规避
问题描述
在某种场景下,需要点击span标签变成input标签,然后在input标签下编辑,编辑完成之后按回车或点击input标签外的地方又变回span标签

双击后:

回车:

实际上触发了两次
实现代码
Document {{msg}}
解决办法
@keyup.enter="$event.target.blur()"
修改后:

Document {{msg}}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- JavaScript实现Tab栏切换功能详解_javascript技巧_
- 10分钟内讲解Npm脚本使用教程_JavaScript_
- 解读vue页面监听store值改变问题_vue.js_
- JavaScript作用域与作用域链使用重点讲解_javascript技巧_
- React18 中的 Suspense API使用实例详解_React_
- Node.js实现http请求服务与Mysql数据库操作方法详解_node.js_
- JavaScript DOM节点操作方式全面讲解_javascript技巧_
- TypeScript Typeof运算符的5个实用技巧详解_javascript技巧_
- vue 同局域网访问不到的问题及解决_vue.js_
- vue的指令和插值问题汇总_vue.js_
