Question

我正在研究剪贴板功能，但我面临一些与鼠标事件相关的问题。

在下面的代码段中，我的剪贴板功能仅在我删除label tag和style="display:none" class="hide"时才有效。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery</title>
    <link href="_assets/css/Style.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="_assets/js/ZeroClipboard.js" type="text/javascript"></script>
    <script type="text/javascript">
        function myfunc2() {
            var selectedobj = document.getElementById('texter');
            if(selectedobj.className=='hide'){  //check if classname is hide 
                selectedobj.style.display = "block";
                selectedobj.readOnly=true;
                selectedobj.className ='show';
            } else {
                selectedobj.style.display = "none";
                selectedobj.className ='hide';
            }
        }
    </script>    
    <script type="text/javascript">
        jQuery(document).ready(function(){
            var clip = new ZeroClipboard.Client();
            clip.setText('');  
            jQuery('#copy-button').click(function(){
                clip.setText(jQuery('#texter').val());
            });
        });
        $(document).ready(function () {
            var clip = new ZeroClipboard.Client();
            clip.setText(''); // will be set later on mouseDown
            clip.addEventListener('mouseDown', function (client) {
                // set text to copy here
                clip.setText(jQuery('#texter').val());    
                // alert("mouse down"); 
            });
            clip.glue('copy-button');
        });
    </script>
</head>
<body>
    <label  onmouseover="myfunc2()">Click here</label> 
    <textarea name="texter" id="texter"  style="display:none" class="hide"   readonly>sdfdsfsdfgdfdfg</textarea>
    <input type="button" value="Copy to clipboard" id="copy-button" />
</body>

Answer 1

尝试

 $(document).ready(function () {
        var clip = new ZeroClipboard.Client();
        clip.setText('');  
        $('#copy-button').click(function(){
            clip.setText($('#texter').val());
        }); 


        clip.mousedown(function (client) {
            // set text to copy here
            clip.setText($('#texter').val());    
            // alert("mouse down"); 
        });
        clip.glue('copy-button');
    });

我已经耦合了两个.ready函数并删除了第二个ZeroClipboard.Client（）实例，因为它不再需要了。我还以不同的方式绑定了mousedown事件，有关详细信息，请参阅jQuery mousedown() doc。

并引入更新版本的jquery更改此内容; http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js 至; http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js

为鼠标事件问题提供替代解决方案

1 个答案: