为了账号安全,请及时绑定邮箱和手机立即绑定

ZeroClipboard为什么点击两次才能成功呢?上全部代码

ZeroClipboard为什么点击两次才能成功呢?上全部代码

慕少森 2019-03-21 18:15:30
<!doctype html><html><head>    <meta charset="UTF-8">    <title>插件</title>    <script src='ZeroClipboard.min.js'></script>    <script>        function setCopyClip(id)         {             clip = new ZeroClipboard.Client(); //初始化对象              ZeroClipboard.setMoviePath("ZeroClipboard.swf");            clip.setHandCursor( true );   //设置手型            var oA   = document.getElementById(id);            var code = oA.getAttribute('data-code');            clip.setText(code);             clip.addEventListener('complete', function (client) {  //创建监听事件              alert('复制成功!');            });              clip.glue(id); //将flash覆盖至指定ID的DOM上          }          window.onload=function()        {            var aA = document.getElementsByTagName('a');            for (var i = 0; i < aA.length; i++)             {                aA[i].onclick=function()                {                   setCopyClip(this.id)                }            }        }           </script></head><body>    <p class="intro">券号:BBBzc1234567A473D00051    <br>    <a href="javascript:;" class="hdl-copymemcode" id='BBBzc1234567A473D00051' data-code="BBBzc1234567A473D00051">复制券号</a>             <br>使用状况:还未开始或已过期                           </p>    <p class="intro">券号:AAAzc1234567A473D00051    <br>    <a href="javascript:;" class="hdl-copymemcode"  id='AAAzc1234567A473D00051' data-code="AAAzc1234567A473D00051">复制券号</a>    <br> 使用状况:还未开始或已过期                          </p></body></html>
查看完整描述

1 回答

?
炎炎设计

TA贡献1808条经验 获得超4个赞

给你说下程序执行的流程吧:

  1. 页面初始化时, <a>元素有onclick事件;

  2. 第一次点击, 触发onclick事件, 调用setCopyClip函数后, 绑定一个ZeroClipboard.Client对象;

  3. 这条是重点 : 在new ZeroClipboard.Client时, ZeroClipboard会创建一个div元素覆盖在<a>元素之上;

  4. 第二次点击, 因为ZeroClipboard创建的div<a>元素之上, 所以不会触发onclick事件;

  5. 第一次绑定的ZeroClipboard.Client对象触发complete事件, 弹出复制成功!弹窗.

PS:你用的ZeroClipboard版本很老的吧...


查看完整回答
反对 回复 2019-04-12
  • 1 回答
  • 0 关注
  • 396 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号