不能点击按钮元素中输入元素

看看下面的标记&小提琴： http://jsfiddle.net/minlare/oh1mg7j6/不能点击按钮元素中输入元素

<button id="button" type="button"> 
    <span id="test" style="background:pink;">test element</span> 
    Add File 
    <input type="file" name="file" multiple="multiple" id="upload"> 
</button>

在Chrome中，在按钮中的每个元素可以通过开发者控制台来选择和js单击事件委托。

在Firefox/IE中，您无法选择子元素或拾取js点击事件。

在Firefox/IE中有没有解决这个问题的方法？

来源

2015-04-02 minlare

这不是有效的HTML标记。一个按钮不能包含诸如输入元素之类的交互式内容（隐藏类型除外）。你最好解释为什么你需要将一个输入类型的文件包装到一个按钮中，这并没有什么意义 –

这个工作在Firefox和Chrome中;请参阅此codepen http://codepen.io/drewrygh/pen/rCucG – Vikrant

旧版本的http://fineuploader.com/需要一个按钮元素（对于init），然后它插入输入元素@ A.Wolff – minlare

它不建议使用按钮内的元素，所以你可以使用“div”而不是“按钮”，这将使它在mozilla和chrome中都能正常工作。检查下面

<div id="button" type="button"> 
    <span id="test" style="background:pink;">test element</span> 
    Add File 
    <input type="file" name="file" multiple="multiple" id="upload"> 
</div>

http://jsfiddle.net/oh1mg7j6/8/

来源

2015-04-02 11:32:39

谢谢，这是我的下一步，只是希望可能有一种方法来实现这一点与css – minlare

@minlare如果上述解决方案帮助，将其标记为答案/投票它 –

解决方案解决了我的问题！谢谢 –