无法单击按钮元素内的输入元素

Question

看看下面的标记 & fiddle： 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 中，按钮中的每个元素都可以通过开发人员控制台 select 编辑，并委托 js 点击事件。

在 Firefox/IE 中，您不能 select 子元素或拾取 js 单击事件。

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

Answer 1

不建议在按钮内部使用元素，因此您可以使用 "div" 而不是 "button"，这将使它在 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/

Answer 2

不太好style.Even我可以说这种方式不是right.you可以在你的按钮上设置"click"事件来点击input.so如果你想隐藏 input[file] 元素，但让它可以点击，你可以像我一样 said.Here 是一个非常好的 link 事件文档和示例。

http://www.w3docs.com/learn-javascript/javascript-events.html

无法单击按钮元素内的输入元素

Cannot click input element within button element

html

javascript

css

javascript-events