ZeroClipboard为什么点击两次才能成功呢?上全部代码
<!doctype html>
<html lang="en">
<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>
jquery 程序员 php zeroclipboard JavaScript
Mioooo
11 years, 3 months ago
Answers
给你说下程序执行的流程吧:
-
页面初始化时,
<a>
元素有onclick事件; -
第一次点击, 触发
onclick
事件, 调用setCopyClip
函数后, 绑定一个ZeroClipboard.Client
对象; -
这条是重点 : 在
new ZeroClipboard.Client
时,ZeroClipboard
会创建一个div
元素覆盖在<a>
元素之上; -
第二次点击, 因为ZeroClipboard创建的
div
在<a>
元素之上, 所以不会触发onclick
事件; -
第一次绑定的
ZeroClipboard.Client
对象触发complete
事件, 弹出复制成功!
弹窗.
PS:你用的ZeroClipboard版本很老的吧...
一之濑姬月
answered 11 years, 3 months ago