使用e.preventDefault()仍无法阻止表单提交后页面刷新问题求助

核心原因 #

你代码里存在变量作用域错误：
你在window.load回调函数中用let定义了settings_form变量，该变量是块级作用域，仅在load回调内部可访问。而你全局定义的save_settings函数直接调用了settings_form，会抛出ReferenceError: settings_form is not defined未捕获错误。
未捕获的JS异常会导致代码逻辑中断，部分场景下会使得已经调用的e.preventDefault()失效，触发表单默认提交刷新行为。你注释save_settings后没有报错，所以阻止刷新逻辑正常生效。

额外问题 #

你表单中的保存按钮是type="button"，默认不会触发form的submit事件，如果你没有额外手动触发submit的逻辑，绑定的submit事件监听器根本不会执行。

修复步骤 #

1. 修复变量作用域问题，二选一即可 #

• 方案A：调用save_settings时传入表单实例
  修改submit事件回调：

  settings_form.addEventListener("submit", function (e) {
    e.preventDefault();
    save_settings(settings_form); // 传入表单实例
    console.log("hi");
    return false;
  });
  

  对应修改save_settings定义：

  function save_settings(form) {
    let json_data = toJSONstring(form);
    // 其余原有逻辑保持不变
  }
  

• 方案B：在save_settings内部自行获取表单实例，放开你之前注释的代码即可：

  function save_settings() {
    let form = document.getElementById("settings_form"); // 放开这行注释
    let json_data = toJSONstring(form);
    // 其余原有逻辑保持不变
  }
  

2. 给异步请求加错误捕获，避免请求出错导致未捕获异常 #

修改save_settings中的post_data调用，添加错误捕获逻辑：

post_data("api/settings/change", json_data).then((send_response) => {
  console.log(send_response);
  conn_status = 1;
  get_info();
}).catch(err => {
  console.error('请求失败：', err);
  conn_status = 0;
});

3. 调整按钮类型（可选，按需操作） #

如果你确实需要使用submit事件监听，将按钮类型改为submit，点击按钮会自动触发表单提交事件，不需要额外绑定click事件：

<input type="submit" value="Save Settings" id="submit_btn">

关于本地运行异常的说明 #

JSBin上运行正常是因为你在写测试代码时，settings_form大概率定义在了全局作用域，不存在变量未定义的错误。本地运行异常是代码本身的作用域问题导致，不是本地服务器的问题。

内容的提问来源于stack exchange，提问作者George Florian