HTMLDialogElement requestClose 和 close 有什么区别

HTMLDialogElement 的两个方法看起来都能关闭

记住一条判断：要不要给 cancel 事件一次阻止机会？要，就用 requestClose()；不要，就用 close()。两者都可以传入字符串更新 returnValue，最终结果适合在 close 事件中读取。

一、先把两个方法放回关闭链路

两种方法都接收一个可选字符串参数，参数会成为对话框的 returnValue。真正拉开差异的是事件顺序：

因此，close 事件不是“是否允许关闭”的询问点，而是“已经关闭后的收口点”。需要做拦截判断时，应把逻辑放到 cancel，不要等到 close 事件里再尝试阻止。

二、requestClose 适合需要拦截的关闭请求

例如编辑对话框存在脏数据时，点击取消、按 Esc 或调用关闭按钮，都应该共享一套确认逻辑。requestClose() 会把程序发起的请求放进与平台关闭请求相似的链路中：

编辑中的内容尚未保存。
  取消
打开编辑器

const dialog = document.querySelector("#editorDialog");
let dirty = true;

// 统一拦截 requestClose() 和 Esc 产生的关闭请求。
dialog.addEventListener("cancel", (event) => {
  if (dirty && !window.confirm("内容尚未保存，仍要关闭吗？")) {
    // 阻止默认关闭，dialog 会继续保持打开。
    event.preventDefault();
  }
});

document.querySelector("#cancelEdit").addEventListener("click", () => {
  // 只发起请求，不在这里绕过 cancel 检查。
  dialog.requestClose("cancel");
});

当用户在确认框中选择“不关闭”时，cancel 事件被取消，close 不会发生。若允许关闭，浏览器继续完成关闭流程，之后才会触发 close。这也是把 Esc、关闭按钮和其他“请求关闭”入口统一起来的关键。

三、close 负责确认关闭，不能替代取消确认

如果提交前的校验已经完成，直接关闭更合适。把最终值传给 close()，再在 close 事件中读取，可以避免在多个按钮处理器里重复收集结果：

const dialog = document.querySelector("#editorDialog");
const saveButton = document.querySelector("#save");

saveButton.addEventListener("click", () => {
  // 这里先完成同步校验；校验失败时不要调用 close。
  const value = "saved";
  dialog.close(value);
});

dialog.addEventListener("close", () => {
  // close 事件发生时，returnValue 才是本次关闭的最终值。
  console.log("dialog result:", dialog.returnValue);
});

这里如果改成 requestClose("saved")，仍会先经过 cancel。这不是错误，只是多了一道可拦截环节。反过来，把需要确认的取消按钮直接改成 close()，就等于跳过了业务的最后一道保护。

四、按浏览器支持和业务语义选择降级方案

requestClose() 是较新的对话框能力，MDN 将其标为 Baseline 2025；如果项目还要覆盖较旧的浏览器，先做能力检测。要注意，下面的降级只能保证“能关掉”，不能保留 cancel 拦截能力：

function requestDialogClose(dialog, returnValue = "") {
  // 新浏览器保留 cancel 拦截链路；旧浏览器退回直接关闭。
  if (typeof dialog.requestClose === "function") {
    dialog.requestClose(returnValue);
    return;
  }
  dialog.close(returnValue);
}

如果“未保存提醒”是不可省略的业务规则，不要把这个降级函数当成完整兼容方案。可以在调用前自行执行确认，再决定是否调用 close()；如果只是普通信息提示，直接关闭通常已经足够。

相关问题

requestClose 会不会总是触发 close？

不会。如果 cancel 事件处理器调用了 preventDefault()，对话框保持打开，close 事件也不会触发。

close 能不能被 cancel 事件拦截？

不能。close() 直接关闭；要让关闭前有拦截点，应改用 requestClose() 或在调用 close() 前自行完成确认。

两个方法都能设置 returnValue 吗？

可以。调用参数会更新 returnValue，建议统一在 close 事件里读取最终值。