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()
       }
    },
}