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一樣。