web uploader在Firefox下上传点击无效的解决方法

最新推荐文章于 2023-05-17 13:33:06 发布

樊小书生

最新推荐文章于 2023-05-17 13:33:06 发布

阅读量2k

点赞数

分类专栏： HTML 文章标签： firefox chrome button

本文链接：https://blog.csdn.net/fxss5201/article/details/78397558

版权

HTML 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在公司项目中，做一个上传文件的功能，选用了百度的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一样。

樊小书生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web uploader在Firefox下上传点击无效的解决方法

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

扫一扫