文章目录

在公司项目中,做一个上传文件的功能,选用了百度的web uploader,按照官网上面的方法,写好之后,在chrome下面没有任何问题,可是在Firefox下面怎么点击都没有效果?

官网上的例子在chrome和Firefox上都可以触发。查看官网上的HTML布局如下:

1
2
3
4
5
6
7
<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导致的,随后我写了个小例子测试了下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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一样。

文章目录