关于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来使元素显示后才能正确获得这些值。