ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

VUE中关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

今天做项目时,在用到element中的MessageBox弹窗组件的时候,同事提出了一个需求,要求取消按回车默认触发确定按钮的点击事件,理由是删除操作的时候点快了可能会误删…

于是我就开始各种在网上查找资料,终于让我找到一位大佬提供的解决方法,

建议先阅读完这篇文章,再来观阅

我按照以上这位大佬提供的方法,确实成功的解决了回车触发事件问题,但是我发现又出了一个新问题,鼠标第一次点击确定的时候,没有响应事件,第二次的时候才会触发响应事件.经过多次反复测试,发现确实会有这个问题.具体的原因如下

在beforeClose函数中,我在这三个地方分别进行打印

打印结果如下图,发现第一次点击确定的时候并没有触发确定按钮的onclick事件,第二次点击却触发了click事件

经上图打印结果显示,我个人认为是第一次点击确定按钮的时候,在beforeClose中仅仅只是做了对确定按钮绑定点击事件,以及取消回车响应事件,但是并没有调用.抱着这个想法我认为可以在第一次点击的时候就触发绑定的点击事件.以下为想法实践

再次测试,第一次点击确定打印内容

问题解决!下面贴上完整的beforeClose函数代码:

// An highlighted block
beforeClose: (action, instance, done) => {
      // 取消回车确认事件
 // console.log('进入beforeClose事件');
   if (action === 'confirm') {
     
      // console.log('进入 action === confirm 条件');
       instance.$refs['confirm'].$el.onclick = function (e) {
     
          // console.log('进入点击事件');
           e = e || window.event;
           if (e.detail !== 0) {
     
               done();
           }
       }();
   } else {
     
       done();
   }
}

参考文档