zclip筆記:解決zclip失效問題


在一個子頁面里想實現一鍵復制到剪貼版的功能,使用zclip插件,用jquery的方式實現時出現了詭異問題。復制功能平時正常,當頁面中所列的內容過多時,一鍵復制的功能失效。

這個問題相當不好定位,先說結論:zclip工作的機制是將一個透明的flash ZeroClipboard.swf 覆蓋到要點擊的元素<a>之上,點擊動作作用於flash。該flash的position設置為absolute,當子頁面內容過長時,拉動滾動條,flash並不會隨要點擊的元素移動,因此點擊該元素不會有任何效果。

解決方法:在要點擊的元素外加一層<div>,設置position:relative

 

一開始我以為是信息量大時,由於后台處理的關系,響應時間過長導致zclip這個函數和元素出現加載順序的問題。在js里加了一個$("#copy").click(function(){alert()}),點擊時運行正常,排除。

接着將后台的返回值寫死,復制功能依然失效,判斷與后台的運行速度無關。將前台從后台動態取值的部分寫死,問題依然存在。排除后台問題,定位為前台。

這時已經懷疑是zclip可能有bug。打開瀏覽器的開發工具,發現復制有效的場景中鼠標移到<a>上時,<a>的class變為hover,而無效的場景中沒有這個變化,兩者都有一個由zclip生成的embed元素。有點懷疑是無效場景中元素<a>與embed沒有作關聯,在<a>的class中加入hover,依然無效。觀察兩個embed元素,發現只有top值不同,解釋為無效場景中頁面信息多於有效場景,因此元素普遍下移。

我覺得可能要到zclip的工作原理中去找原因。看到說flash會覆蓋在元素之上,再聯想兩個場景中唯一不同的就是top值,開始懷疑這個問題與位置有關。再想起在正確場景中,點擊元素時開發工具會同時顯示<a>與embed;而在無效場景中下面的embed沒有反應,說明embed和<a>不在同一個位置。我判斷最有可能的就是生成頁面時原始元素與embed位置相同,而拉動滾動條的時候embed沒有被拉上去。要驗證的話應該可以發現當信息量大到足夠使子頁面產生滾動條時復制就會失效,這一步直接跳過了。

 

google了一下發現有老外也在討論這個問題,並提出以上解決方案,按照該方案修改成功。

reference:http://stackoverflow.com/questions/8673681/zclip-not-working-inside-table

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM