vue项目回车删除数据(踩坑记录)

今天改bug的时候,产品说删除数据需要点击回车(enter)键进行删除

于是我先在组件中注入了监听键盘按键的事件

created() {//监听键盘按下事件window.addEventListener('keydown', this.handEnterCode, true)
},

紧接着,我在methods里面添加触发改键盘事件的方法

methods:{// 回车键盘触发该方法handEnterCode(e) {if(e.keyCode === 13){// 删除数据的方法this.submitPopupData()}},
}

最后还需要在离开此页面的时候移除改事件,不然到了别的页面按回车页面触发改方法,造成不好的体验

destroyed(){//销毁回车事件，如果不销毁，在其他页面敲回车也会执行回车登录操作。window.removeEventListener('keydown',this.keyDown,false);}

本来以为这样就万事大吉了,完美实现这个功能,但是玩着玩着出现了另外一个bug,看下面视频

enter 回车bug视频

最开始猜测出现这个问题的原因是因为触发完成在之后没有移除这个键盘事件,于是我在删除成功里面进行了事件的移除，还是没有效果于是我在多玩了几次,发现了一个问题,只要回车删除成功之后,继续回车,就一直会触发删除弹框事件,接着回车又会连续删除数据,但是如果我在第一次回车删除数据,关闭之后,点击了页面任何按钮之后或者点击任何空白地方之后,在继续回车就没有这个问题了,于是我猜测是事件冒泡的问题(第一次点击删除按钮弹出删除框,这个时候如果不进行任何操作的话,上次的旧事件因为冒泡是还遗留的,所以第一次回车删除之后,因为遗留事件的存在,所以我们第二次点击回车还是会唤起删除弹窗,再次点击就可以直接删除,造成一个新的bug),点击别处就可以把这个遗留的事件清除,所以找到问题所在就好解决了,我们在触发了回车键之后, 把冒泡事件清除就可以

methods:{// 回车键盘触发该方法handEnterCode(e) {// 这句话可以阻止回车事件冒泡;如果注释掉这句话,那么会事件残余e.preventDefault()if(e.keyCode === 13){// 删除数据的方法this.submitPopupData()}},
}

vue项目回车删除数据(踩坑记录)相关推荐

使用Java读取 “Python写入redis” 的数据踩坑记录
https://my.oschina.net/u/2338224/blog/3061507 使用Java读取 "Python写入redis" 的数据踩坑记录 https://seg ...
vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~
1.安装配置 - 安装 $ npm install vue-i18n 或者: <script src="https://unpkg.com/vue/dist/vue.js"& ...
Vue SPA应用微信开发踩坑记录
解决难点 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的网址,但由于单页应用的路由特殊,其中涉及到的iOS和Android的微信客户端浏览器内核的差异性导致的兼容问题 JS-S ...
vue3+vite+ts项目集成科大讯飞语音识别（项目搭建过程以及踩坑记录）
微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录将动态改变的视频链接分享至推特,并希望能直接在推特上播放视频的需求实现方法及踩坑记录如果只要将文本或链接分享到推特,不需要推特识别图片/视频等媒 ...
数据标注平台（CVAT）安装及踩坑记录
目录一.CVAT安装 step1 安装docker step2 获取权限 step3 获取权限 step4 克隆cvat源代码 step5 构建docker镜像 step6 运行Docker容器这一 ...
vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分 ...
配合Opencv2.4.9，CMake3.12.1和VS2010在win10下构建项目踩坑记录
配合Opencv3,CMake和VS2010在win10下构建项目踩坑记录参考https://blog.csdn.net/qq_26623659/article/details/78322782 博 ...

vue项目回车删除数据(踩坑记录)

vue项目回车删除数据(踩坑记录)相关推荐

最新文章

热门文章