关于jquery的jquery.zclip.js在使用时隐藏元素失效讨论

今天在做一个粘贴功能时，想在元素加载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来使元素显示后才能正确获得这些值。