display:none引起的血案

背景：

此處須要開發一個馬甲號的添加功能，其中涉及到了圖片的上傳，webuploader.js上傳圖片 頁面加載時彈框是隱藏着的，但點擊加號按鈕時才彈出彈框

問題：

點擊「選擇圖片」不生效了，文件選擇框一直彈不出來

 

彎路：

1.懷疑是該插件自己有問題，棄坑，打算用H5的方法<input type="file">本身寫一個。......後臺的接口也須要修改，而現有的代碼中還有不少是用該插件實現的上傳。行不通.......

思考好久，可能緣由：

webuploader，封裝了一個input，type=‘file’，瀏覽文件按鈕實現原理是一個透明的層，點擊這個層會觸發點擊事件。因爲個人隱藏和展現是試用的display:none,而該方法會致使點擊不響應。（在WebUploader初始化的時候，該方法緣由致使它動態獲取的元素大小有問題）

解決方法：

1.用z-index=-99來隱藏，z-index=99展現（不夠優雅）

2.直接在樣式中修改，把動態元素的大小恢復正常（較好）

#filePicker div:nth-child(1){
    left: 0;
}
#filePicker div:nth-child(2){
    width: 100% !important;
    height: 100% !important;
}

 

總結：

{ display: none; /* 不佔據空間，沒法點擊 */ } 

/********************************************************************************/ 

{ visibility: hidden; /* 佔據空間，沒法點擊 */ } 

/********************************************************************************/ 

{ position: absolute; top: -999em; /* 不佔據空間，沒法點擊 */ } 

/********************************************************************************/ 

{ position: relative; top: -999em; /* 佔據空間，沒法點擊 */ } 

/********************************************************************************/ 

{ position: absolute; visibility: hidden; /* 不佔據空間，沒法點擊 */ } 

/********************************************************************************/ 

{ height: 0; overflow: hidden; /* 不佔據空間，沒法點擊 */ } 

/********************************************************************************/ 

{ opacity: 0; filter:Alpha(opacity=0); /* 佔據空間，能夠點擊 */ } 

/********************************************************************************/ 

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不佔據空間，能夠點擊 */ } 

 

該插件的官網：

http://fex.baidu.com/webuploader/doc/index.html