Edge浏览器触发文件输入框点击时change事件未触发的问题

我来帮你搞定这个Edge下的文件上传问题～你遇到的情况是Chrome和Firefox正常，但Edge中点击上传按钮后，文件选择完成的change事件没触发，核心问题出在事件绑定的时机上。

问题原因分析 #

你的代码是在点击按钮后，先触发隐藏file input的点击，再绑定change事件。在Edge浏览器中，调用trigger("click")后，文件选择对话框会立即阻塞主线程，此时你的change事件绑定代码还没执行完成；当用户选择完文件关闭对话框时，change事件已经触发了，但你的处理函数还没绑定上去，所以自然捕获不到这个事件。而Chrome和Firefox的事件循环处理时序和Edge不同，它们会先完成事件绑定，再处理对话框的后续事件，所以能正常触发。

解决方案1：提前绑定change事件（推荐） #

把change事件的绑定移到按钮点击事件外面，页面加载完成就绑定，这样不管什么时候触发file input的change事件，处理函数都已经存在了，同时还能避免多次点击按钮导致重复绑定事件的问题。

修改后的代码如下：

<div id="banner-message"> 
  <button id="UploadButton">Upload</button> 
  <input type="file" id="testUploader" style="display: none;" /> 
</div> 
<script type="text/javascript"> 
// 页面加载完成就绑定change事件
$("#testUploader").on("change", function() { 
  console.log("change"); 
});

$("#UploadButton").on("click", function () { 
  $("#testUploader").trigger("click"); 
}); 
</script>

解决方案2：先绑定事件再触发点击 #

如果一定要在按钮点击事件内处理，可以先完成change事件的绑定，再触发file input的点击，同时用off清除之前的绑定，避免重复执行：

<div id="banner-message"> 
  <button id="UploadButton">Upload</button> 
  <input type="file" id="testUploader" style="display: none;" /> 
</div> 
<script type="text/javascript"> 
$("#UploadButton").on("click", function () { 
  // 先清除之前的绑定，再绑定新的change事件
  $("#testUploader").off("change").on("change", function() { 
    console.log("change"); 
  });
  // 再触发点击
  $("#testUploader").trigger("click"); 
}); 
</script>

两种方案都能解决Edge下的问题，第一种方案更简洁且符合事件绑定的最佳实践，优先推荐使用。

内容的提问来源于stack exchange，提问作者Dev 404