原生JavaScript：测验得0分时如何阻止HTML表单提交至result.html

兄弟，我懂你这个头疼的状况——弹了提示框，用户点确定后还是跳去了空的结果页，用了window.history.back和preventDefault都没搞定，其实核心问题大概率是你监听的事件不对，或者preventDefault用的时机没卡准。咱们来一步步修正：

关键问题分析 #

你之前可能是监听了提交按钮的click事件，但按钮的默认行为就是触发表单提交，哪怕你在click里做了处理，表单的默认提交流程还是会走。正确的姿势应该是监听表单本身的submit事件，这个事件才是控制表单是否提交的核心入口。

具体代码实现 #

先确保你的表单有一个可识别的ID，比如：

<form id="quiz-form" action="result.html" method="POST">
  <!-- 这里是你的测验题目、选项等内容 -->
  <button type="submit">提交我的答案</button>
</form>

然后修改你的JavaScript逻辑，把计分和阻止提交的逻辑放在表单的submit事件里：

// 获取表单元素
const quizForm = document.getElementById('quiz-form');

// 监听表单的submit事件
quizForm.addEventListener('submit', function(e) {
  // 调用你的计分函数，这里假设你已经有计算得分的逻辑，替换成你自己的就行
  const userScore = calculateUserScore();

  // 判断得分是否为0
  if (userScore === 0) {
    alert('得分为0，无法提交，请重新答题！');
    // 关键：调用preventDefault阻止表单的默认提交行为
    e.preventDefault();
    // 这里不需要history.back，因为我们根本没让表单跳转，也就不用后退
    return; // 提前退出函数，避免后续可能的逻辑执行
  }

  // 如果得分不为0，表单会正常提交到result.html，不用额外处理
});

// 示例计分函数，替换成你自己的实际逻辑
function calculateUserScore() {
  let score = 0;
  // 这里写你的计分逻辑，比如遍历选中的选项和正确答案对比
  // 举个简单例子：
  const correctAnswers = ['option1', 'option3', 'option2'];
  document.querySelectorAll('input:checked').forEach((input, index) => {
    if (input.value === correctAnswers[index]) {
      score += 1;
    }
  });
  return score;
}

为什么之前的方法没生效？ #

1. 事件监听对象错了：如果监听的是按钮的click，哪怕你阻止了按钮的默认行为，表单的submit事件还是会被触发，导致跳转。必须监听表单的submit事件才能从根源阻止提交。
2. preventDefault调用时机不对：如果你的计分逻辑是异步的（不过测验一般都是同步），或者preventDefault写在了提示框的回调外面，也可能失效。上面的代码把它放在if(score===0)的分支里，同步执行，就能稳稳阻止提交。
3. 有没有手动跳转代码？：检查你的JS里有没有类似window.location.href = 'result.html'的语句，如果有，得分0的时候要跳过这段代码，不然哪怕阻止了表单提交，手动跳转还是会生效。

这样修改后，当用户得0分时，弹出提示后就不会再跳转到result.html了，只有得分大于0时才会正常提交。

内容的提问来源于stack exchange，提问作者Austin K.