clipboard.js複製無效

今天寫個頁面剛好要複製邀請鏈接，本來已經用過很多次clipboard了，沒想到居然怎麼也複製不了，clipboard複製回調的success和error函數也不調用，真是鬱悶了，本來小程序就遇到一個下載的坑還着急改呢。

這是html結構

<div class="m-wrap">
  <p class="invite-url">
     <span id="invite-url-cot">https://izihun.com/shangyongziti/zihun27.html</span>
  </p>
  <div id="invite-copy-url" class="copy-url" data-clipboard-target="#invite-url-cot">複製鏈接</div>
</div>

這是js

ar gCopy = $('.g-copy');
    gCopy.show()
    $('.g-copy .m-copy').on('click',function (e) { 
        e.stopPropagation();
        e.cancelBubble = true;
    })
    gCopy.on('click',function () { 
        gCopy.hide();
    })
    
    $('.copy-url').on('click',function () { 
        var clipboard = new ClipboardJS('.copy-url');
        console.log(clipboard);
        clipboard.on('success', function(e) {
            console.log('複製成功')
        });
        clipboard.on('error', function(e) {
            console.log('複製失敗')
        });
    })

去官網翻了好幾遍文檔也沒看出個所以然，最後只能一行一行代碼排查，最後發現是清除冒泡的鍋，把清除冒泡刪掉就好了。沒有對clipboard的原理沒有進行過研究，但是相比一定是和父級的點擊事件有關的。突然很好奇clipboard的實現原理，有時間和一定得看看