原始HTML结构示例：

<form class="form">
  <button id="darkToggle">Dark mode</button> <!-- 这个按钮在表单内，默认是type="submit" -->
  <label for="age">How old are you?</label>
  <input type="number" id="age" name="age" />
  <input id="allowedCheck" type="submit" value="Check if you're allowed in" />
</form>

优化后的HTML结构示例：

<button id="darkToggle">Dark mode</button> <!-- 移到表单外部 -->
<form class="form">
  <label for="age">How old are you?</label>
  <input type="number" id="age" name="age" />
  <input id="allowedCheck" type="submit" value="Check if you're allowed in" />
</form>

通过这种方式，darkToggle 按钮将不再与表单提交行为产生关联。

1.2 策略B：为非提交按钮显式设置类型并阻止默认行为

如果出于布局或语义化考虑，非提交按钮必须保留在

HTML结构（添加 type="button"）：

度加剪辑（原度咔剪辑），百度旗下AI创作工具

<form class="form">
  <button id="darkToggle" type="button">Dark mode</button> <!-- 显式设置为type="button" -->
  <label for="age">How old are you?</label>
  <input type="number" id="age" name="age" />
  <input id="allowedCheck" type="submit" value="Check if you're allowed in" />
</form>

J*aScript事件处理（添加 event.preventDefault()）：

let button = document.getElementById("darkToggle");

button.addEventListener("click", function (event) { // 确保传入event参数
  event.preventDefault(); // 阻止按钮的默认行为（即使type="button"通常不会提交，这也是一个好习惯）

  // ... 切换深色模式的逻辑 ...
  document.body.classList.toggle("body-dark-mode");
  document.querySelector(".form").classList.toggle("form-dark-mode");
  document.querySelector(".message").classList.toggle("message-dark-mode");

  if (document.body.classList.contains("body-dark-mode")) {
    button.textContent = "Light mode";
  } else {
    button.textContent = "Dark mode";
  }
});

即使 默认不会触发表单提交，在其点击事件中调用 event.preventDefault() 也是一个良好的防御性编程实践，以防未来浏览器行为变化或意外的事件冒泡。

解决方案二：确保主表单提交时 preventDefault() 生效

如果主表单的提交按钮（input type="submit" 或 button type="submit"）在点击后仍然导致页面刷新，即使你认为已经调用了 event.preventDefault()，这通常是因为事件监听器没有正确地绑定到表单的 submit 事件上。

问题分析： 在原始代码中，提交逻辑被绑定到了 input type="submit" 元素的 onsubmit 属性：

document.getElementById("allowedCheck").onsubmit = (event) => {
  event.preventDefault();
  // ... 提交逻辑 ...
}

onsubmit 事件是

推荐解决方案：将 submit 事件监听器绑定到 元素上。

HTML结构（为表单添加一个ID）：

<form class="form" id="mainForm"> <!-- 添加ID以便于J*aScript选择 -->
  <button id="darkToggle" type="button">Dark mode</button>
  <label for="age">How old are you?</label>
  <input
      type="number"
      id="age"
      name="age"
      min="0"
      max="120"
      placeholder="Enter your age"
      required
  />
  <!-- ... 其他表单元素 ... -->
  <input
      id="allowedCheck"
      type="submit"
      value="Check if you're allowed in"
  />
</form>

J*aScript事件处理（绑定到表单的 submit 事件）：

// 获取表单元素
const mainForm = document.getElementById("mainForm");
const messageTxt = document.getElementById("messageTxt");
const beerBottle = document.getElementById("beer-bottle");
const ageInput = document.querySelector("#age");
const drunkInput = document.querySelector("#drunk");

// 为表单添加 submit 事件监听器
mainForm.addEventListener("submit", (event) => {
  event.preventDefault(); // 阻止表单的默认提交行为，防止页面刷新

  messageTxt.innerHTML = ""; // 清空消息区域

  const age = parseInt(ageInput.value, 10);
  const drunk = parseInt(drunkInput.value, 10);

  if (drunk < 2 && age >= 18) {
    beerBottle.src = "../assets/green_beer.svg";
    const p = document.createElement("p");
    p.innerText = "Please come in.";
    messageTxt.appendChild(p);
  } else if (drunk >= 2) {
    beerBottle.src = "../assets/red_beer.svg";
    const p = document.createElement("p");
    p.innerText = "Sorry, we h*e a legal obligation not to serve intoxicated persons.";
    messageTxt.appendChild(p);
  } else if (age < 18) {
    beerBottle.src = "../assets/red_beer.svg";
    const p = document.createElement("p");
    p.innerText = "Sorry, you are too young to enter.";
    messageTxt.appendChild(p);
  }
});

// 保持 darkToggle 按钮的逻辑不变
let darkToggleButton = document.getElementById("darkToggle");
darkToggleButton.addEventListener("click", function (event) {
  event.preventDefault(); // 确保不触发任何默认行为
  document.body.classList.toggle("body-dark-mode");
  document.querySelector(".form").classList.toggle("form-dark-mode");
  document.querySelector(".message").classList.toggle("message-dark-mode");

  if (document.body.classList.contains("body-dark-mode")) {
    darkToggleButton.textContent = "Light mode";
  } else {
    darkToggleButton.textContent = "Dark mode";
  }
});

通过将 submit 事件监听器附加到

注意事项与总结

• 明确按钮类型： 始终为 元素明确指定 type 属性 (type="button" 用于普通按钮，type="submit" 用于提交按钮)。这有助于避免不必要的混淆和意外的提交行为。
• 监听表单的 submit 事件： 对于表单的整体提交逻辑，最佳实践是监听 元素的 submit 事件，并在其中调用 event.preventDefault()。
• 事件冒泡： 了解事件冒泡机制。虽然在大多数表单提交场景下不是主要问题，但在复杂的交互中，事件可能会从子元素冒泡到父元素，影响事件处理。
• 代码可读性与维护： 将事件监听器和逻辑清晰地组织起来，使用有意义的变量名，有助于提高代码的可读性和未来的维护性。