1.前沿

　　在项目中使用clipboad.js去实现点击按钮，自动复制一段网址到剪切板。一开始使用正常，pc端移动端都正常。突然有一个测试提了个bug，复制失败。简直一脸懵逼。。。

　　下面就讲讲解决这个bug的历程。

2、透过表象思考

　　1、遇到这个bug，我第一个思考到的是，这是个流行的主流插件，网上应该有现成解决方法。然后搜了网上的方法，把绑定data-clipboard-target属性的按钮标签从div换成button，还是没用。网上的解决方案失败。

　　2、思考：为什么随着项目的进行，复制功能会失效。是不是全局禁用了一些默认事件，导致了clipboad.js内部实现复制功能与禁用的默认事件冲突，所以才复制失败。按这个思路去排查的两个方法：1、去看clipboard的源码了，找到复制功能的具体实现，与哪些事件和默认事件有关联，再去寻找冲突点。2、业务代码中去排查，哪里做了全局事件的配置，这些配置一个个排查哪个影响了clipboad复制功能的实现。第一种相对牛皮，学习了原理也是极好的成长。第二种，是比较蠢的方法，有时候是比较有效的，可能在少量的试验中就找到了bug点，有时候是找不出来的。只可花少量的时间去试验第二种方法。其实，这里还有另一种方法，就是换一种方式去实现复制功能。轮子已经造好了，根据文档有两种方式去实现复制功能。

　　我一开始所使用的是方法1: html属性绑定复制内容。如下：

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

　　然后试验改成了文档说明的另外种实现方法2: js绑定复制内容。如下：

new ClipboardJS(‘.btn‘, {
    text: function(trigger) {
        return trigger.getAttribute(‘aria-label‘);
    }
});

　　第二种方法成功解决了移动端复制失败的问题。

3、寻找原因

　　可以说，“投机取巧”，花最小的代价，解决了问题。问题虽然解决了，有时间总得找找bug的原因吧。回头认真看了下文档，在对方法1（移动端复制失败的那个方法）的描述中，看到这么一段话：

　　大意就是：复制或者剪切操作之后会选中对象，这个对象会通过触发一些cases（事件）去捕获和反馈信息。

　　重点来了：上面的这句话是重点，what has been selected after a copy/cut operation.  根据描述，复制后的对象是要被（selected）选中状态的。

　　突然想起来，业务代码中，长按选中文本的功能被全局禁用了。。。。。用的是以下css

html,body{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

　　找到疑点，经试验，确实是这个原因引起的，导致方法1复制功能失败。

　　再回头思考，方法1方法2的区别。推测：方法1，受css：user-select的影响，应该跟内部实现原理有关。方法2，在new实例中，传入text参数，通过js获取复制内容，所以不受css：user-select的影响。一切推测和表象，达成高度切合。这只是一个强有力的推测，最后最有效的论证，还得研究clipboad源码的实现。

　　问题点找到，解决方案也有了。此bug暂告一个段落！！

4、总结：

　　1、解决问题的思路有很多。有时候根据问题的表象去分析问题，能有几种思路去排查。有时候不必纠结于问题的表象和原因，条条大路通罗马，换一种方式去实现功能，也不错。不管哪种方式去解决，都有不一样的付出和收获。

原文地址：https://www.cnblogs.com/damonFeng/p/9174492.html