項(xiàng)目中使用WebUploader做的圖片上傳功能，出現(xiàn)一個奇怪的問題，就是頁面第一次加載完成之后，點(diǎn)擊瀏覽文件的按鈕沒有反應(yīng)。

以下是參考網(wǎng)上的一些說法：

問題的原因大體是這樣，WebUploader初始化的時候，封裝了一個input，type=‘file’。

瀏覽文件按鈕實(shí)現(xiàn)原理是一個透明的層，點(diǎn)擊這個層會觸發(fā)點(diǎn)擊事件，如果在WebUploader初始化的時候，因?yàn)楦鞣N原因?qū)е滤鼊討B(tài)獲取的元素大小有問題，

比如說網(wǎng)上一個網(wǎng)友的說法，初始化的時候因?yàn)楂@取不到正確的自身或者容器的大小，這時候初始化出來的這個透明層的大小就會是1px*1px，這么小的層，根本點(diǎn)不到。

所以也就觸發(fā)不了點(diǎn)擊事件。

以上是網(wǎng)上的資料，我想問題的原因差不多就是類似的情況。我是剛接觸WebUploader，沒有深入研究，不過看官網(wǎng)的演示，以及其余人的實(shí)現(xiàn)，這個問題應(yīng)該已經(jīng)解決了。

要是還出現(xiàn)這個問題，原因應(yīng)該是自己頁面的因素比較多。

我這里出現(xiàn)這個問題的最終原因是我上傳所使用的div層，設(shè)置了隱藏屬性。我使用的display:none來設(shè)置的隱藏。

經(jīng)過測試，WebUploader的瀏覽文件點(diǎn)擊無效（但是重新渲染一下就可以點(diǎn)擊，比如說按下F12）和這個display:none屬性有關(guān)系。

問題原因找到了，就好解決了，元素的隱藏顯示不用display，使用CSS控制。問題解決。

參考：http://www.jb51.net/web/73987.html

{ display: none; /* 不占據(jù)空間，無法點(diǎn)擊 */ } /********************************************************************************/ { visibility: hidden; /* 占據(jù)空間，無法點(diǎn)擊 */ } /********************************************************************************/ { position: absolute; top: -999em; /* 不占據(jù)空間，無法點(diǎn)擊 */ } /********************************************************************************/ { position: relative; top: -999em; /* 占據(jù)空間，無法點(diǎn)擊 */ } /********************************************************************************/ { position: absolute; visibility: hidden; /* 不占據(jù)空間，無法點(diǎn)擊 */ } /********************************************************************************/ { height: 0; overflow: hidden; /* 不占據(jù)空間，無法點(diǎn)擊 */ } /********************************************************************************/ { opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間，可以點(diǎn)擊 */ } /********************************************************************************/ { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間，可以點(diǎn)擊 */ } /********************************************************************************/ { zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* IE6/IE7/IE9不占據(jù)空間，IE8/Firefox/Chrome/Opera占據(jù)空間。都無法點(diǎn)擊 */ } /********************************************************************************/ { position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* 不占據(jù)空間，無法點(diǎn)擊 */ } 
最后補(bǔ)充點(diǎn)自己的感慨：網(wǎng)友的一些答案有時候很有啟發(fā)。display:none問題導(dǎo)致WebUploader點(diǎn)擊無效，這個其實(shí)在一個問答里面看到過（url找不到了），但是當(dāng)時沒有多去思考，一看問題和我遇到的不是很貼切就快速瀏覽完關(guān)掉了頁面，現(xiàn)在想來，那個網(wǎng)友對這個理解是比較透徹的，而我是走了彎路，回頭來想想才意識到，解決方式已經(jīng)搜到過。
我走的彎路是排除法，官網(wǎng)演示沒有問題，我自己的頁面有問題，所以我就一點(diǎn)點(diǎn)排除我的頁面。最笨的辦法，先只保留WebUploader上傳，測試發(fā)現(xiàn)沒有問題，原因找到，就是我頁面問題。然后逐個的排除我頁面的元素（要在一個什么提示都沒有的頁面，找出來哪里有沖突，感覺就頭大。但是，但是，但是，當(dāng)你真正動手的時候才發(fā)現(xiàn)，困難比想象的要小很多。動手實(shí)踐才是王道）。