今天在做一个粘贴功能时,想在元素加载dom节点的时候也就是 $(function() {})的时候 对一个隐藏元素绑定 jquery.zclip.js 的zclip方法
$("#copyBt").zclip({
path:'http://static.zqgame.com/js/ZeroClipboard.swf',
copy:function(){
var copyText = $(this).prev().val();
if(!copyText || " " == copyText){
return null;
}
return copyText;
},
afterCopy:function(){
alert("已经成功复制到您的剪贴板!");
}
});
但是发现绑定的click按钮始终不能复制成功,纠结了一天,调试了一天也没有解决。后来把上面这段代码放在隐藏元素显示之后去绑定按钮发现 复制功能能成功使用。然后去寻找原因发现
在jquery.zclip.js的源码中 其实有这样的判断
if (o.is(':visible') && (typeof settings.copy == 'string' || $.isFunction(settings.copy))) {
ZeroClipboard.setMoviePath(settings.path);
var clip = new ZeroClipboard.Client();
if ($.isFunction(settings.copy)) {
o.bind('zClip_copy', settings.copy);
}
if ($.isFunction(settings.beforeCopy)) {
o.bind('zClip_beforeCopy', settings.beforeCopy);
}
if ($.isFunction(settings.afterCopy)) {
o.bind('zClip_afterCopy', settings.afterCopy);
}
发现其实作者在一开始就判断元素是否是visible的如果是可见的才给元素绑定zClip_copy这些的功能
在后面的代码中
getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
if (obj && (obj != stopObj)) {
alert($(obj).val());
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
}
return info;
},
它会调用元素的offsetLeft方法获取他的位置,如果隐藏元素是会返回为0,Zclip复制的原理是给元素上面覆盖一层SWF的层所以如果找不到元素的位置也就不会给元素覆盖一层SWF了 所以作者一开始就 判断了VISIBLE
终于找到原因了,弄懂原理还是很激动
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。