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的实现原理，有时间和一定得看看