Home > Backend Development > PHP Tutorial > javascript - ZeroClipboard为什么点击两次才能成功呢?上全部代码

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

WBOY
Release: 2016-06-06 20:45:40
Original
1363 people have browsed it

<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>
Copy after login
Copy after login

回复内容:

<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>
Copy after login
Copy after login

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

  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版本很老的吧...

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template