解決使用 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" : '請選擇 “拷貝” 進行複制!'
                                });
                    });

     };
           

每次打開頁面就會執行個體化目前對象，之後每次點選 成功方法還會重複調用 是以設了一個全局變量去判斷沒次點選後就銷毀執行個體對象 并從新初始化執行個體對象就能避免多次點選 成功方法被多次調用。

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