javascript - 为什么在 FireFox 中单击按钮时文件打开对话框会打开两次

Question

我有一个 file <input> field 和一个 <span> 装饰输入字段:

<span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files
    <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>
</span>

虽然我在 Chrome 和 Safari 中的行为是这样的，但是 FireFox 打开两个 file input dialogs点击 button(span) 。

为什么会这样？

我假设，文件输入字段是不可见的，只能通过带有按钮行为的 span 访问它。

更新:

如果我将 <input> 放在 <span> 之外，它会正常运行。

 <span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files</span>
 <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>

JSFiddle

但为什么在 inside position 上没有呢？

Answer 1

这是因为某种事件传播困惑

<span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="doOpen(event)">chose files
    <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>
</span>

和

function doOpen(event){
    event = event || window.event;
    if(event.target.id != 'filechose_button'){
        filechose_button.click();
    }
}

演示:Fiddle