clipboard.js复制无效

最新推荐文章于 2025-06-11 11:41:59 发布

幻想山外小楼听雨

最新推荐文章于 2025-06-11 11:41:59 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：插件文章标签： clipboard 复制链接无效复制链接复制链接插件

本文链接：https://blog.youkuaiyun.com/promiseCao/article/details/88430989

插件专栏收录该内容

3 篇文章

订阅专栏

本文记录了一次使用ClipboardJS在网页中复制邀请链接时遇到的问题及解决方案。作者在尝试复制链接时遇到了复制功能失效的情况，经过排查发现是由于事件冒泡处理不当导致。通过调整代码，删除了阻止冒泡的代码段，最终成功实现了链接的复制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天写个页面刚好要复制邀请链接，本来已经用过很多次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的实现原理，有时间和一定得看看