是否允许将dialog元素嵌套在form内？嵌套后按钮失效问题咨询

当把<dialog>嵌套在<form>内部实现提交确认功能时，会出现点击"No"按钮无响应（实际是触发表单提交而非关闭对话框）的问题，而将dialog放在form外部时功能完全正常。

问题原因 #

在<form>标签内的<button>元素，默认type属性为"submit"。所以点击"No"按钮时，浏览器会默认触发表单的submit事件，而不是执行我们绑定的关闭对话框逻辑——此时虽然会触发cancelBtn的点击事件关闭dialog，但紧接着表单的submit事件会被触发，导致页面跳转，看起来就像"No"按钮没起作用。

而当dialog在form外部时，按钮不属于表单上下文，默认type为"button"，不会触发表单提交，所以逻辑正常。

解决方法 #

只需给取消按钮显式设置type="button"，明确它是普通按钮而非提交按钮即可：

修改后的代码示例 #

HTML

<form id="myForm">
  <input type="submit" value="Submit" />
  <dialog id="confirmDialog">
    <p>Are you sure you want to submit this form?</p>
    <menu>
      <button id="confirmBtn">Yes</button>
      <button id="cancelBtn" type="button">No</button>
    </menu>
  </dialog>
</form>

JavaScript

const form = document.getElementById("myForm");
const dialog = document.getElementById("confirmDialog");
const confirmBtn = document.getElementById("confirmBtn");
const cancelBtn = document.getElementById("cancelBtn");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  dialog.showModal();
});

confirmBtn.addEventListener("click", function() {
  dialog.close();
  form.submit(); // 继续提交表单
});

cancelBtn.addEventListener("click", function() {
  dialog.close(); // 取消表单提交
});

也可以选择在取消按钮的点击事件中阻止默认行为，但显式设置type是更清晰、更符合语义的做法：

cancelBtn.addEventListener("click", function(event) {
  event.preventDefault();
  dialog.close();
});

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