首页 >后端开发 >php教程 >javascript - ZeroClipboard为什么点击两次才能成功呢?上全部代码

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

WBOY
WBOY原创
2016-06-06 20:45:401363浏览

<code>


    <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>



    <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>



</code>

回复内容:

<code>


    <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>



    <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>



</code>

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

  1. 页面初始化时, <a></a>元素有onclick事件;
  2. 第一次点击, 触发onclick事件, 调用setCopyClip函数后, 绑定一个ZeroClipboard.Client对象;
  3. 这条是重点 : 在new ZeroClipboard.Client时, ZeroClipboard会创建一个div元素覆盖在<a></a>元素之上;
  4. 第二次点击, 因为ZeroClipboard创建的div<a></a>元素之上, 所以不会触发onclick事件;
  5. 第一次绑定的ZeroClipboard.Client对象触发complete事件, 弹出复制成功!弹窗.

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn