HTML dialog 模态关闭后如何读取 returnValue

模态

先用 close 事件读取当前对话框结果

不要在调用 close() 前读取结果，也不要把结果放在打开按钮的点击回调里判断。关闭动作发生后，close 事件才是统一出口。下面的例子把结果限定为三个可识别字符串，页面逻辑只需要消费这一组值。

是否归档这条记录？
  暂不归档
  确认归档
打开确认框

const dialog = document.querySelector("#confirmDialog");
const status = document.querySelector("#status");

// 每次打开都丢弃上一次结果，避免重复使用旧值。
document.querySelector("#openButton").addEventListener("click", () => {
  dialog.returnValue = "";
  dialog.showModal();
});

// close 事件发生在 dialog 已关闭之后，此处读取最终字符串。
dialog.addEventListener("close", () => {
  const result = dialog.returnValue;
  status.textContent = `本次选择：${result || "未选择"}`;
});

// close(value) 会把业务结果写入 returnValue，再触发 close 事件。
document.querySelector("#keepButton").addEventListener("click", () => {
  dialog.close("kept");
});
document.querySelector("#archiveButton").addEventListener("click", () => {
  dialog.close("archived");
});

三种赋值入口，边界并不一样

returnValue 本身是字符串属性。可以直接赋值，也可以把字符串传给 close()；如果使用

如果按钮只是关闭窗口而不代表业务选择，可以调用无参数的 dialog.close()，并把空字符串解释为“没有选择”。不要依赖浏览器或旧代码残留的上一次值来猜测用户意图。

为什么按 Esc 后读到空字符串

按 Esc 触发的是取消请求，它没有天然对应“确认”或“取消按钮”的业务字符串。若本次打开前已经执行 dialog.returnValue = ""，关闭后读到空字符串就是可解释的“未做选择”；如果没有重置，读到的可能是上一次结果。

// cancel 用来观察或拦截 Esc 等平台取消请求。
dialog.addEventListener("cancel", (event) => {
  const shouldKeepEditing = dialog.dataset.requireDecision === "true";
  if (shouldKeepEditing) {
    // 阻止关闭，让用户必须点击一个明确的业务按钮。
    event.preventDefault();
    status.textContent = "请先选择归档或暂不归档";
  }
});

是否拦截 Esc 取决于业务：普通确认框通常允许用户退出，强制选择的流程才考虑 preventDefault()。如果要把 Esc 也归类为取消，可以在 cancel 中记录一个独立状态；不要把它和“暂不归档”按钮混成同一个含义。

用一张检查清单排掉最常见的坑

• 打开前是否执行了 dialog.returnValue = ""？
• 读取是否发生在 close 事件，而不是关闭动作之前？
• 普通按钮是否明确写了 type="button"，避免意外提交外层表单？
• 每条关闭路径是否都有稳定的字符串，例如 archived、kept？
• Esc 的语义是否与按钮取消语义一致？不一致时是否单独处理 cancel？

常见问题

returnValue 为什么总是空字符串？

通常是调用了无参数的 close()，或只给按钮设置了文本却没有设置 value。检查关闭路径是否真正写入字符串。

可以直接读取 dialog.returnValue 吗？

可以，但应在关闭完成后读取。把读取逻辑集中放在 close 事件里，能覆盖脚本关闭和表单关闭两类路径。

show() 和 showModal() 会影响返回值吗？

返回值机制相同，但 showModal() 会让对话框外的页面进入不可交互状态。文章中的模态场景应使用它，并确保不要重复打开已经处于打开状态的 dialog。

记住一个判断顺序：先重置旧值，再用明确的关闭入口写入结果，最后在 close 事件中读取。这样即使用户按 Esc，页面也能把“未选择”和“点击取消”区分成可维护的业务状态。