为什么文件打开对话框打开两次，点击FireFox中的按钮 [英] Why file open dialog opens twice on clicking the button in FireFox

问题描述

我有一个文件< input>字段和< span> 装饰输入字段：

 < span class =span5 btn btn-primary btn-fileid =chose_files_btnonclick =filechose_button.click（）>选择文件
< input id =filechose_button type =filename =fileDatasize =1style =display：none/> 
< / span> 
  

尽管这种行为与我在 Chrome 和 Safari ， FireFox 通过点击按钮打开两个 文件输入对话框 （span）。

为什么会发生这种情况？

文件输入字段是不可见的，只有通过按钮行为的跨度才能访问它。
$ b

更新：

如果我把< input> < span> 的行为正常。

  < span class =span5 btn btn-primary btn-fileid =chose_files_btnonclick =filechose_button.click（）>选择了文件< / span> 
< input id =filechose_buttontype =filename =fileDatasize =1style =display：none/> 
  

JSFiddle

但是为什么在里面的位置不是？

解决方案

这是因为某种事件的传播混乱

 < span class =span5 btn btn-primary btn-fileid =chosen_files_btnonclick =doOpen（event）>选择文件
 < / span> 
  

和

 函数doOpen（event）{
 event = event || window.event; 
 if（event.target.id！='filechose_button'）{
 filechose_button.click（）; 
 
 
 code 
 $ b 
演示： 
 
I have a file <input> field and a <span> decorates the input field:
<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>
While the behavior of this is as I suppose in Chrome and Safari, FireFox opens two file input dialogs on clicking the button(span).

Why could happen so?

I assume, that file input field is invisible and only access to it is through the span with a button behavior. 

Update:

if I put the <input> outside of <span> it behaves normally.
 <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

but why on inside position it does not?
解决方案
It is because of some kind of event propagation mess
<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>
And 
function doOpen(event){
    event = event || window.event;
    if(event.target.id != 'filechose_button'){
        filechose_button.click();
    }
}
Demo: Fiddle

                        
这篇关于为什么文件打开对话框打开两次，点击FireFox中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！