ios12 clipboard无效

Author Avatar
我爱吃包子 5月 17, 2019

想写这篇文章很久了,但是最近的事情都比较多,一直就拖到现在,趁着今天晚上值班,就把遇到的问题以及怎么解决的说一下。

发现问题

前端时间接到客服反馈,有客户点击复制不能复制地址信息,具体的信息我也记不大清了,只记住了当时引发问题的原因,那就是 ios 版本是12.2 。在 ios 12.2 中 fastclick 和 clipboard 相互冲突,导致 clipboard 无效。截下我在 github 上的回答。链接

分析问题

clipboard 有提供报错信息,复现后报错信息大致是关于 fastclick。fastclick 是解决移动端点击事件反应慢的一个解决库,他采用 touchstart 来触发 click 事件,因为在 ios 上 click 事件触发会比 touchstart 事件慢上 300 ms。而 clipboard 是给一个元素添加 click 事件,所以这两个库可能存在着冲突问题。

解决问题

上面分析了这个问题可能产生的原因,那我们就可以着手去解决他了。既然怀疑是两个库出现了冲突,那么最好的办法就是去掉其中一个库。去掉 fastclick ,问题解决。那就可以确定就是 fastclick 和 clipboard 两个库起冲突了,所以我们只需要在这个元素上禁止 fastclick 生效就行。然而官方提供的 needsclick 关键字并没有效果,所以尝试 google 这方面的答案,找到这边文章。里面详细的讲解了 fastclick 的源码,当然了我达不到大佬的境界,当个搬运工也挺让人厌烦的,这里根据大佬的源码解析解决了问题,具体如下图。

"needsclick"

我的解决方案是把关于 needsClick 的相关逻辑提到了最前面,然后重新发布 cdn,引入,问题解决。

最后

最后感谢 https://www.cnblogs.com/vajoy/p/5522114.html 的源码解析,博主写的非常详细,想要了解 fastclick 实现原理的同学可以好好地看看,注释写的很好,思路也很清晰。