通过ajax加载的列表项click事件与clipboard.js冲突

最新推荐文章于 2021-10-22 10:50:37 发布

sprites_young

最新推荐文章于 2021-10-22 10:50:37 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javas javascript

本文链接：https://blog.youkuaiyun.com/weixin_41111189/article/details/81198135

javascript 同时被 2 个专栏收录

4 篇文章

订阅专栏

javas

1 篇文章

订阅专栏

在尝试使用clipboard.js实现列表项的复制功能时，遇到点击事件失效的问题。解决办法是通过JavaScript获取要复制的内容节点，直接传递给clipboard.js进行复制，从而避免click事件冲突。

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

今天使用clipboard.js来制作一个在列表页复制的功能遇到一个问题，那就是使用了clipboard之后，再点击复制，该按钮的click事件就会失效。

            var clipboard = new ClipboardJS('.copy-btn',{
                    target:function(trigger){
                    // return document.querySelector('#copy-area');
                    return trigger.parentNode.parentNode.children[1];
                }
            });

            clipboard.on('success',function(e){
                
                e.clearSelection();
                var text = e.trigger.innerText;
                e.trigger.disabled = true;
                e.trigger.innerText = '复制成功';
                e.trigger.classList.add('btn-success');
                setTimeout(function(){
                    e.trigger.disabled = false;
                    e.trigger.innerText = text;
                    e.trigger.classList.remove('btn-success');
                },2000);

            });

本打算对复制按钮加个点击事件，使其复制指定内容到一个带有id的复制区域，然后clipboard读取该区域内容。但是点击事件失效，所以只好采用js获取待复制内容的节点，然后将该节点传给clipboard，再复制就可以成功。