Javascript 单击FireFox中的按钮，为什么文件打开对话框会打开两次

我有一个

文件字段

，一个

装饰输入字段：

<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>

---

但是为什么在

内部位置它没有呢？
这是因为某种事件传播混乱

<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>

演示：
这是因为事件传播。单击范围时，将引发click事件，并且在click处理程序中调用了click on input 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>


$（文档）.ready（函数（）{
$（“#选择_文件_btn”）。单击（函数（事件）{
文件选择_按钮。单击（）；
}); 
$（“#文件选择_按钮”）。单击（函数（事件）{
event.stopPropagation（）；
});
});
选择文件

欲了解更多信息，请访问

您应该使用它来更好地理解事件传播。
我需要使用“取消绑定单击”才能使代码正常工作

 <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"/>

$("#chose_files_btn").unbind( "click" ); 
$("#chose_files_btn").click(function(event){
    $("#filechose_button).click();
});

$("#filechose_button").unbind( "click" );
$("#filechose_button").click(function(event){
    event.stopPropagation();
});

似乎仍然可能存在DOM反弹事件的情况，因此隐藏输入字段并将其编程为单击的技术很容易受到影响。我现在正在AngularJS应用程序（设计用于cordova移动设备或桌面浏览器）中创建一个模式对话框，需要启动一个文件选择器，在这种情况下会出现这种现象，而上述技术都没有帮助

当我将控制台日志放在弹跳事件上时，它显示回显可以在原始单击后1秒内到达

下面是一个解决方案，它通过创建一个小的事件堆栈并消除在2秒内发生的重复事件来克服它

干杯，
Z



var eventRecords=[]；
const MAX_BOUNCE_DELAY=2000；
功能添加事件（事件）{
推送（{id:event.target.id，时间：Date.now（）}）
}
函数isBounceEvent（事件）{
var ret=false，now=Date.now（），latestTime=0；
对于（var i=0；ilatestTime）latestTime=record.time；
if（record.id==event.target.id&&（now-record.time）

返回了两个jQuery元素，而不是一个

所谓：

$('input[type=file]').trigger('click')

触发两个文件对话框，一个接一个打开

为了解决这个问题，我只在第一个元素上应用了click触发器

$($('input[type=file]').get(0)).trigger('click');

此外，我还使用了解除绑定和停止事件传播，以下是完整代码：

$('#uploadFile').click(function(evt) {                      
        evt.stopPropagation();
        evt.preventDefault();                   
        evt = evt || window.event;
        if(evt.target.id == 'uploadFile'){
            $($('input[type=file]').get(0)).trigger('click');
        }
    });

    $(':file').unbind();
    $(':file').on('change', function(evt) {                                     
        // extra non-relevant code
    });

您是否尝试过将onclick放在输入标记中？从span中删除onclick，然后查看..否，但我应该执行可渲染输入（它会破坏span元素），我相信fileselect_按钮。click（）正在执行此操作。删除.click（）删除fileselected_按钮。click（）使按钮不起作用。当我将输入置于span之外时，我不需要任何js。但无论如何，谢谢你的帮助@静态这也是我的建议，但从评论来看，我认为这对我来说是不可行的you@NullPointer欢迎很高兴帮助你。：）
$('#uploadFile').click(function(evt) {                      
        evt.stopPropagation();
        evt.preventDefault();                   
        evt = evt || window.event;
        if(evt.target.id == 'uploadFile'){
            $($('input[type=file]').get(0)).trigger('click');
        }
    });

    $(':file').unbind();
    $(':file').on('change', function(evt) {                                     
        // extra non-relevant code
    });