解决使用 clipboard.js 复制内容点击两次才能成功问题

需求为复制本地地址栏连接

开始代码

function copyul(event) {

                event.preventDefault();
                var copyurl = document.getElementById('copyurl');
                var clipboard = new Clipboard(copyurl);
                var copyurls = window.location.href;
                copyurl.setAttribute("data-clipboard-text", copyurls);

                clipboard.on('success', function(e) {
                                    fadetoggle.toggle({
                                        "showtext" : "已成功复制到剪贴板"
                                    });
                });
                clipboard.on('error', function(e) {
                            //这里不会执行 
                            fadetoggle.toggle({
                                "showtext" : '请选择 “拷贝” 进行复制!'
                            });
                });
     };
           

需求很简单，就是动态添加当前页面的地址 并实现点击后复制到剪贴板

然而并没有想象中的达到需要的效果

问题为需要点击两次才会生效 而且点击第二次成功后在点击会叠加调用成功方法

修改后代码

var copyurl = document.getElementById('copyurl');
    var clipboard = new Clipboard(copyurl);
    var copynum = ;

    function ul(event) {
                    event.preventDefault();
                    var copyurls = window.location.href;
                    copyurl.setAttribute("data-clipboard-text", copyurls);
                    clipboard.on('success', function(e) {
                                        fadetoggle.toggle({
                                            "showtext" : "已成功复制到剪贴板"
                                        });
                                        copynum++;
                                        if(copynum >= ){
                                            clipboard.destroy();
                                            clipboard = new Clipboard(copyurl);
                                        };

                    });
                    clipboard.on('error', function(e) {
                                //这里不会执行 
                                fadetoggle.toggle({
                                    "showtext" : '请选择 “拷贝” 进行复制!'
                                });
                    });

     };
           

每次打开页面就会实例化当前对象，之后每次点击 成功方法还会重复调用 所以设了一个全局变量去判断没次点击后就销毁实例对象 并从新初始化实例对象就能避免多次点击 成功方法被多次调用。

如有更好方法也可按照自己需求解决。