javascript - 如何通过单击使 ZeroClipboard 工作？

Question

我这里有一个工作示例 http://enginiku.byethost17.com/stack.php

我想要的是根据单击的 block 将数据复制到剪贴板。这工作得很好。但是问题是我需要单击该 block ，将光标从该 block 移开，再次单击，然后才复制数据。我知道这可能是因为该区域变成了闪光对象。

但我希望它仅一次单击即可复制数据(第一次)。请提出出路!!

这是我的脚本

<script>
function copytocb(el){
var id = $(el).attr('id');
ZeroClipboard.setDefaults({moviePath:'http://enginiku.byethost17.com/ZeroClipboard.swf'});
var clip = new ZeroClipboard($('#'+id));
clip.on('complete',function(client,args){
alert('Copied');
});
}
</script>

这是相关的html

<div class="central">
    <div class="maincontent">
        <div class="leftcontent">
            <span id="ss">Some text</span>
        </div>
        <div class="rightcontent">
            <span id="block1" onclick="copytocb(this)" data-clipboard-text="Img1">Img</span>
            <span id="block2" onclick="copytocb(this)" data-clipboard-text="Img2">Img</span>
            <span id="block3" onclick="copytocb(this)" data-clipboard-text="Img3">Img</span>
            <span id="block4" onclick="copytocb(this)" data-clipboard-text="Img4">Img</span>
            <span id="block5" onclick="copytocb(this)" data-clipboard-text="Img5">Img</span>
        </div>
    </div>
</div>

Answer 1

一旦创建了 clip 并将其分配给有问题的跨度，单击它就会产生所需的结果。您是否尝试过将 copytocb() 函数的内容放在文档就绪部分 ($(function(){}))？

编辑:

 $(document).ready(function() {
   ZeroClipboard.setDefaults({moviePath:'http://enginiku.byethost17.com/ZeroClipboard.swf'});
   var DOMarr=$('#rightcontent span').map(function(){return this;});
   var clip = new ZeroClipboard(DOMarr);
   clip.on('load',function(client,args){alert("Clipboard is ready for action.");});
 })

此外:在 span 本身上省略 onclick="copytocb(this)"。这应该不是必需的，因为覆盖的 Flash 影片会自行查找点击事件(希望如此)。

刚刚测试过这个。另请查看其 page 的给定示例.

<强>2。编辑:剪贴板文本也可以通过在底层 span 上设置适当的 mouseover 事件来动态生成，例如

$('#rightcontent span').mouseover(function(){
   var clip.setText($(this).text());
   console.log(clip.options.text); // just to show the effect ...
});

我还尝试在相同的元素上使用 mousedown，但这没有用，因为剪辑事件总是在 跨度的 mousedown 事件之前触发。