HTML模板表单提交时页面加载未等待JavaScript验证执行完成

核心问题是表单默认提交行为未被阻止，和第三方事件监听器拦截无关：

1. 你嵌入模板后的代码把输入控件、按钮包裹在了<form>标签内，而按钮未指定type属性时，浏览器会默认将其识别为type="submit"的提交按钮，点击后会立即触发表单的原生提交逻辑，直接跳转/刷新页面，不会等待你写的异步fetch校验逻辑执行完成。
2. 控制台输出的[Violation] Forced reflow while executing JavaScript took 134ms只是性能告警，不是跳转的诱因，是表单提交中断JS执行过程中顺带抛出的提示，不影响核心逻辑修复。
3. 你贴出的嵌入模板代码存在DOM结构不完整问题：表单末尾缺少</form>闭合标签，不规范的DOM结构也可能导致浏览器事件解析异常。

按优先级操作即可：

• 最简便的修复：给提交按钮显式指定按钮类型，让浏览器不要把它当成提交按钮，修改模板中的按钮标签为：

<button type="button" onclick="myFunction()"> Submit form</button>

改完不需要调整原有JS逻辑，就能阻止默认提交行为。

• 如果你想保留按钮的submit语义，就在myFunction开头加默认事件阻止逻辑，修改函数定义：

function myFunction(e) {
  // 阻止表单原生提交
  e.preventDefault();
  // 下方保留你原有的取值、fetch请求、结果判断所有逻辑即可
  var x = document.getElementById("id_pa").value;
  var y = document.getElementById("key").value;
  var key_fram =x+"_"+y
  var full_url = 'http://xxxxx-test.xxxxxxxx.com/'+ x + "_"+ y + ".pdf";
  fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(full_url)}`)
  .then(response => {
    if (response.ok) return response.json()
    throw new Error('Network response was not ok.')
  })
  .then(data => { var tt = data.status.http_code; allm(tt,key_fram);
});}

• 补全表单的闭合标签，在最后一个</div>后添加</form>，保证DOM结构合法。
• 检查嵌入模板后的JS加载顺序：确保myFunction的定义代码在按钮DOM渲染前加载完成，同时确认模板中没有其他同名的myFunction覆盖你写的逻辑，避免点击时触发的不是你写的校验函数。

强制重排的性能告警不影响功能正常运行，等表单提交逻辑修复完成后，如果告警还存在，再针对性检查JS中是否存在连续读写DOM样式触发强制重排的代码做优化即可，不需要优先处理。

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