web uploader在Firefox下上傳點選無效的解決方法
阿新 • • 發佈：2018-12-27
在公司專案中，做一個上傳檔案的功能，選用了百度的web uploader，按照官網上面的方法，寫好之後，在chrome下面沒有任何問題，可是在Firefox下面怎麼點選都沒有效果？
官網上的例子在chrome和Firefox上都可以觸發。檢視官網上的HTML佈局如下：
<div id="picker" class="webuploader-container"> <div class="webuploader-pick">選擇檔案</div> <div id="rt_rt_1btmmnbjm7q8nrgf9ul2t1kc51" style="position: absolute; top: 0px; left: 0px; width: 88px; height: 35px; overflow: hidden; bottom: auto; right: auto;"> <input name="file" class="webuploader-element-invisible" multiple="multiple" type="file"> <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255) none repeat scroll 0% 0%;"></label> </div> </div>
最外層的id=”picker”標籤是我們繫結web uploader的標籤，web uploader會自動在內部生成一段程式碼填充。官網的佈局和我的佈局的區別在於我繫結web uploader的標籤是button，難道是button導致的，隨後我寫了個小例子測試了下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>button</title> </head> <body> <button> <div id="alert">點選彈出</div> </button> <script> var clickElemnt = document.getElementById("alert"); clickElemnt.onclick = function(){ alert("1"); } </script> </body> </html>
在chrome下面可以彈出彈窗，正常顯示，但是在Firefox下面沒有任何反應，看來應該是在Firefox瀏覽器中button標籤內部不允許其他標籤把，只能是文字，之後我將繫結web uploader的標籤換為div，在Firefox下面也就可以使用了。
看來這應該是Firefox對button標籤做的一些限制，就好比table/thead/tbody一樣。