zeroClipboard定位不准及多个地方使用所遇到的问题

将自己在项目中使用时所遇到的定位不准及多地方使用复制而导致的复制不成功的问题做记录，若也有人遇到类似问题，可以作为一个参考。

网上很多地方都可以搜索到Zero Clipboard的实现原理以及使用方法，这里就不赘述了，只讲遇到的问题以及解决办法。

问题一、网页一般有主界面以及一些弹出框，当主界面和弹出框中都有复制按钮需要进行复制时，主界面的复制能够复制成功，但是弹出框中点击复制所生成的flash却定位不准导致无法实现复制操作。

问题二：点击弹出框中的复制第一次无法复制成功，需要点击第二次才能复制成功。

代码为如下使用方式：

var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor( true ); // 设置鼠标为手型
clip.setText("哈哈"); // 设置要复制的文本。
clip.glue("copy-button"); // 和上一句位置不可调换

以上代码的前提是已经引入zeroClipboard插件所需的js和swf，而这代码是在copy-button的click事件中的。

针对错误，研究了很久的代码，网上也找了各种博客查看，一开始还是无法解决问题，后来终于找到一个博客说这样说：

“

这里有一个很有趣的英文单词：glue。我们可以通过下面这个api，将flash和按钮重叠，且浮在按钮之上：

clip.glue( 'clip-button-id' );

或clip.glue( document.getElementById('clip-button-id' ));

即第一个参数为id或dom对象都可以。如果按钮在网页运行中位置发生了变化，flash是不会自动调整位置的，为此我们提供了另一个api可以手动更新flash的位置：

clip.reposition();

flash的相对浮动
这里还提供了一种更巧妙的方式：如果按钮的上层有任何position:relative的块状元素，比如div，而按钮和这个块状元素的位置又是相对固定的，那么可以在调用glue函数时，将这个div的id作为第二个参数传进去，不过同时reposition这个api就失效了。比如：

clip.glue( 'clip-button-id', 'clip-container-id' );

”

将复制的id设置为复制按钮的父级元素上，即clip.glue( 复制按钮的id, 复制按钮父级元素的id);这样就可以解决问题一即弹出框上定位不准的问题

将复制的注册事件和其他所有都绑定在复制的hover或者mouseenter上，就可以解决问题二及需要在弹出框中点击两次才能复制的问题。

导致问题一的原因是：flash是生成在body的最底部的，弹出框本身就是相对界面来说是悬浮在界面上的，而flash是相当于整个界面的相对位置来设置的，这样容易导致定位不准的问题。而将复制的触发事件绑定在复制按钮的父级元素的话，生成的flash就是在复制按钮的父级元素容器内，复制按钮是相对父级元素的，flash现在也是相对其父级元素的，因此生成的位置就正确了。

导致问题二的原因是：绑定在click事件中的话，第一次点击时zeroClipboard才注册成功，因此无法直接执行flash的复制，第二次点击才复制成功。而绑定在hover或mouseenter上的话，鼠标放上去则注册成功，再点击复制即可复制成功了。