解决使用 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 = 0;    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 >= 1){                                            clipboard.destroy();                                            clipboard = new Clipboard(copyurl);                                        };                    });                    clipboard.on('error', function(e) {                                //这里不会执行                                 fadetoggle.toggle({                                    "showtext" : '请选择 “拷贝” 进行复制!'                                });                    });     };

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

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