对话框元素是否大声嵌套在表单元素中？

Question

我有一个表单，我想使用对话框来确认提交。将对话框嵌套在表单中对我来说会很方便，这样在使用 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(); // Continue form submission
});

cancelBtn.addEventListener("click", function() {
  dialog.close(); // Cancel form submission
});

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

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(); // Continue form submission
});

cancelBtn.addEventListener("click", function() {
  dialog.close(); // Cancel form submission
});

<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">No</button>
    </menu>
  </dialog>
</form>

Answer 1

当对话框嵌套在表单中时，“否”按钮上的点击事件似乎会触发 default 的表单提交，从而阻止您自行决定处理取消操作。

可以通过调用

preventDefault()

方法修改代码，防止点击“否”按钮时默认提交表单：

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(); // Continue form submission
});

cancelBtn.addEventListener("click", function() {
  event.preventDefault(); // Cancel form submission
  dialog.close(); // Cancel form submission

});

<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">No</button>
    </menu>
  </dialog>
</form>