为什么单击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 dialogsbutton(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();
    }
}

演示:小提琴

Answer 2

这是因为事件传播.当您单击跨度时,会单击事件并在您调用的单击处理程序中单击输入type ="file",因此它将调用两次.

如果您尝试使用以下代码,则不会引发传播事件.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
 $(document).ready(function(){
 $("#chose_files_btn").click(function(event){

 filechose_button.click();
}); 
$("#filechose_button").click(function(event){
    event.stopPropagation();
});
});
</script>

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

有关更多信息,请访问此链接

你应该玩这个来更好地理解事件传播.