我的標題看起來很大，但我卻是純粹的標題黨，所以不要對接下來的內容抱有太大希望，這里只是我的個人筆記本而已，但卻總好像是寫給別人看的一樣，可能寫完還會發發微博，但卻有忽悠嫌疑。好了，說了這么多還沒進入主題，有罪，下面再描述一下。
最近由於工作的需要，有一個復制的功能需要做，以前就知道單靠dom接口和js是無法兼容主流瀏覽器的，但由於懶惰自己並沒花時間多了解，這次就稍微整理一下備忘。首先，想實現主流瀏覽器的復制功能，看這里：《突破IE跨瀏覽器復制內容到剪貼板》，假設你看到這篇文章的時間跟我寫這篇文章的時間相隔很久了，也就是這個鏈接已經404，那么，你還可以看這里：http://note.sdo.com/u/634718107660171185/n/bBXuN~kjXr9gLX0OM0028- ，再假設這兩個鏈接都打不開了，那沒辦法了，自己谷歌一下“zeroclipboard"的相關內容進行了解。相信你看完之后，已經知道怎么一回事了，也已經能自己實現復制功能了。下面的內容，可看可不看。over！！！
由於我的工作需要，是一個頁面里面有多個復制，所以，如果按照上面提供的方法，我的代碼將顯得有點難看，有較多的重復性代碼，而我又剛好是一個在乎自己代碼的”漂亮性“遠遠大於我個人外表形象的人，所以，我用JQ封裝了一下(因為我的項目用JQ，所以用JQ封裝)，將難看的代碼隱藏起來。調用方式則如下：
1 $('.copy').zclip({ 2 path:'ZeroClipboard.swf', 3 hoverClass: 'newhover', 4 copy:function(){ 5 return $( this ).next().val(); 6 }, 7 complete: function( text, client ){ 8 alert( '復制的值為:' + text); 9 } 10 });
path: 為所需的swf位置
hoverClass: 自定義鼠標滑過時的class名
copy: 返回所要復制的內容，由用戶控制，return為必需，其this指向.copy元素，自己控制要復制的內容
complete: 可以認為是復制成功時的回調，其下this指向元素，第一個參數text為復制的內容，第二個參數client為復制元對象，用戶進一步交互，具體可自己打印client了解。
還有一個mouseover方法，用於鼠標划過時的交互。
zclip代碼如下：
1 (function ($) { 2 3 $.fn.zclip = function (params) { 4 5 if( typeof params === 'object' && !params.length ) { 6 7 var settings = $.extend({ 8 9 path: 'ZeroClipboard.swf', 10 hoverClass: 'hover', 11 copy: null, 12 mouseover: null, 13 complete: null, 14 setHandCursor: true, 15 setCSSEffects: true 16 17 }, params); 18 19 return this.each(function () { 20 21 var $this = $( this ), 22 o = $this[0]; 23 24 if ( $this.is( ':visible' ) && $.isFunction( settings.copy ) ){ 25 26 ZeroClipboard.setMoviePath( settings.path ); 27 28 var clip = new ZeroClipboard.Client(); 29 30 //設置手形、設置hover支持、修改默認hover名字 31 clip.setHandCursor( settings.setHandCursor ); 32 clip.setCSSEffects( settings.setCSSEffects ); 33 clip.setHoverClass( settings.hoverClass ); 34 35 clip.glue( o ); 36 37 //綁定mouserhover事件 38 clip.addEventListener( 'mouseover', function( client ){ 39 if( typeof settings.mouseover === 'function' ){ 40 settings.mouseover.call( o ); 41 } 42 }); 43 44 //綁定mousedown事件，內部用 45 clip.addEventListener( 'mousedown', function( client ){ 46 47 clip.setText( settings.copy.call( o ) ); 48 49 }); 50 51 //綁定復制成功時事件 52 clip.addEventListener( 'complete', function( client, text ){ 53 54 if( typeof settings.complete === 'function' ){ 55 56 settings.complete.call( o, text, client ); 57 } 58 settings.setCSSEffects && $this.removeClass( settings.hoverClass ); //fixed IE6 59 }); 60 61 $( window ).bind( 'load resize', function(){ 62 clip.reposition(); 63 }); 64 65 } 66 67 }); 68 69 } 70 } 71 72 })(jQuery);
原ZeroClipboard在IE6，復制完后hover沒去掉，這里做了修復，並直接修改原ZeroClipboard，加入自定義hover名的功能。
好了，就到這里，按我以前應該會在這里放一段可執行的代碼讓人直接運行一下看效果，現在懶了，就這樣吧。
測試代碼下載
///////////////////////// 2013.6.6 update /////////////////////////////////////////
發現當復制按鈕的祖先元素如果有position:relative相對定位，則gule( o )定位將不准，它也提供了 gule( o, 相對定位的祖先元素 )方法來解決這個問題，但個人覺得很麻煩，故重寫了它的getDOMObjectPosition方法，如下：
1 getDOMObjectPosition: function (obj, stopObj) { 2 // get absolute coordinates for dom element 3 /*var info = { 4 left: 0, 5 top: 0, 6 width: obj.width ? obj.width : obj.offsetWidth, 7 height: obj.height ? obj.height : obj.offsetHeight 8 }; 9 10 if (obj && (obj != stopObj)) { 11 info.left += obj.offsetLeft; 12 info.top += obj.offsetTop; 13 }*/ 14 15 //fixed position bug 16 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, 17 scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 18 var info = { 19 left: obj.getBoundingClientRect().left + scrollLeft, 20 top: obj.getBoundingClientRect().top + scrollTop, 21 width: obj.width ? obj.width : obj.offsetWidth, 22 height: obj.height ? obj.height : obj.offsetHeight 23 }; 24 25 return info; 26 },
經測試不管祖先元素有無定位，均正常。
參考鏈接： http://www.iefans.net/tupoie-kua-liulanqi-fuzhi-jiantieban/