zclip笔记：解决zclip失效问题

在一个子页面里想实现一键复制到剪贴版的功能，使用zclip插件，用jquery的方式实现时出现了诡异问题。复制功能平时正常，当页面中所列的内容过多时，一键复制的功能失效。

这个问题相当不好定位，先说结论：zclip工作的机制是将一个透明的flash ZeroClipboard.swf 覆盖到要点击的元素<a>之上，点击动作作用于flash。该flash的position设置为absolute，当子页面内容过长时，拉动滚动条，flash并不会随要点击的元素移动，因此点击该元素不会有任何效果。

解决方法：在要点击的元素外加一层<div>，设置position:relative

 

一开始我以为是信息量大时，由于后台处理的关系，响应时间过长导致zclip这个函数和元素出现加载顺序的问题。在js里加了一个$("#copy").click(function(){alert()})，点击时运行正常，排除。

接着将后台的返回值写死，复制功能依然失效，判断与后台的运行速度无关。将前台从后台动态取值的部分写死，问题依然存在。排除后台问题，定位为前台。

这时已经怀疑是zclip可能有bug。打开浏览器的开发工具，发现复制有效的场景中鼠标移到<a>上时，<a>的class变为hover，而无效的场景中没有这个变化，两者都有一个由zclip生成的embed元素。有点怀疑是无效场景中元素<a>与embed没有作关联，在<a>的class中加入hover，依然无效。观察两个embed元素，发现只有top值不同，解释为无效场景中页面信息多于有效场景，因此元素普遍下移。

我觉得可能要到zclip的工作原理中去找原因。看到说flash会覆盖在元素之上，再联想两个场景中唯一不同的就是top值，开始怀疑这个问题与位置有关。再想起在正确场景中，点击元素时开发工具会同时显示<a>与embed；而在无效场景中下面的embed没有反应，说明embed和<a>不在同一个位置。我判断最有可能的就是生成页面时原始元素与embed位置相同，而拉动滚动条的时候embed没有被拉上去。要验证的话应该可以发现当信息量大到足够使子页面产生滚动条时复制就会失效，这一步直接跳过了。

 

google了一下发现有老外也在讨论这个问题，并提出以上解决方案，按照该方案修改成功。

reference:http://stackoverflow.com/questions/8673681/zclip-not-working-inside-table