解决layui点击按钮后,按回车再次触发的问题

不念不忘少年蓝@ 2021-09-24 17:30 1130阅读 0赞

在测试项目bug时发现如题所诉bug，好家伙，点击新建按钮后在狂按回车，直接给我弹出一堆窗口，屏幕都给整黑了。。。

经过一番查阅文档及调试，找到如下解决方法：

方法一：

在layer.open方法中的success回调中添加：$(':focus').blur();。

layer.open({
                    type: 2
                    , content: 'xxx'
                    , title: '新建'
                    , area: ['80%', '90%']
                    , shade: 0.6
                    , skin: "layui-layer-molv"
                    , maxmin: false
                    ,success:function () {
                        $(':focus').blur();
                    }
                });

经测试，没什么用，网上的方法也不辣么靠谱。

方法二：

在layer弹出层的参数中添加id，作为唯一标识，设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式。

layer.open({
                    id:'add'
                    type: 2
                    , content: 'xxx'
                    , title: '新建'
                    , area: ['80%', '90%']
                    , shade: 0.6
                    , skin: "layui-layer-molv"
                    , maxmin: false
                });

经测试，这种方法仅适用于单一的弹出层，如果页面还有其他的弹出层则需要每个弹出层都设置一个id值即可，鉴于项目中已经有很多的弹出层，一个一个改太麻烦，还需寻找通用的方法！

方法三：

在弹出层的父页面内加上以下代码，规避。

$('body').off('click').on('click','button',function () {
        $(this).blur();
    });

该代码应放在父页面中，比如新建按钮所在的页面，而非新建页面。

最后，猜想，出现该问题的原因是因为点击按钮后，焦点还在该按钮上，此时在按下enter键，相当于再次点击该按钮，所以会多次弹出。