通过JavaScript设置file input值触发无关事件的技术问询

看起来你遇到的核心问题是：当你通过document.getElementById("myFile").value = null;清空文件输入框时，浏览器会自动触发它的change事件，导致你的事件处理函数被意外重复执行——这就是你觉得“看似无关”的事件来源，其实它就是同一个change事件被二次触发了。

另外你的代码还有个潜在隐患：每次myFile触发change事件时，你都会给modalButton绑定一次click事件，多次选择文件后，点击按钮会触发多次AJAX请求，这肯定不是你想要的结果。

下面给你针对性的修复方案：

1. 用标志位跳过清空操作触发的change事件 #

我们可以加一个状态标志，区分用户主动选择文件触发的change，还是代码清空导致的change，后者直接跳过处理逻辑：

// 定义一个标志位，标记是否是主动清空操作
let isClearingFile = false;

$('#myFile').on('change', function(){
  // 如果是清空操作触发的change，直接重置标志位并返回
  if (isClearingFile) {
    isClearingFile = false;
    return;
  }

  if(test == "passed"){
    // 先解绑之前的click事件，再绑定新的，避免重复绑定
    $('#modalButton').off('click').on('click', function(){
      $.ajax({
        url: "process.php",
        type: "POST",
        // 你的其他AJAX参数...
      });
    });
  } else {
    // 设置标志位，告诉下一次change事件是我们主动触发的
    isClearingFile = true;
    document.getElementById("myFile").value = null;
  }
});

2. 优化modalButton的事件绑定逻辑 #

更合理的做法是把click事件绑定移到change事件外部，只绑定一次，避免重复绑定的问题：

// 把click事件绑定移到外面，仅执行一次绑定
$('#modalButton').on('click', function(){
  // 可根据需求获取myFile的当前状态或数据
  $.ajax({
    url: "process.php",
    type: "POST",
    // 你的其他AJAX参数...
  });
});

// 处理myFile的change事件
let isClearingFile = false;
$('#myFile').on('change', function(){
  if (isClearingFile) {
    isClearingFile = false;
    return;
  }

  if(test !== "passed"){
    isClearingFile = true;
    document.getElementById("myFile").value = null;
  }
});

为什么会触发额外的change事件？ #

这是浏览器的默认行为：<input type="file">元素的value属性一旦被修改（包括设置为null或空字符串清空），浏览器就会触发它的change事件。你的代码在change事件处理函数里修改了value，自然会导致事件被再次触发，形成递归调用的隐患。

内容的提问来源于stack exchange，提问作者stressed out