dialog.returnvalue 是只读属性，仅用于标识关闭动作（如'submit'），不能传结构化数据；获取用户输入须在调用 close() 前主动读取表单或状态，推荐用 promise 封装实现可控的数据返回。
dialog.returnValue 是只读属性，无法直接赋值获取用户数据
很多人看到 dialog.returnValue 就以为能像表单一样“设置并取回”用户输入，其实它在标准中是只读的——浏览器根本不允许你往里写值。调用 dialog.close('yes') 时传入的字符串，确实会写入 returnValue，但这是关闭动作的副作用，不是“数据绑定”。真正要拿用户数据，得靠你自己在关闭前手动收集。
关闭前必须主动读取表单字段或状态，再传给 close()
典型场景是弹窗里有 <input>、<select></select> 或自定义状态（比如勾选了哪个选项卡）。不能等 close 触发后再去读，因为那时 DOM 可能已被移除或重置（尤其用了 open=false 或 remove()）。
实操建议：
- 监听
dialog的close事件，但在触发close()前就完成数据采集 - 把提交逻辑封装进按钮点击处理函数，而不是依赖
dialog.returnValue的“自动回传” - 如果用
<form></form>包裹内容，可直接调用form.reportValidity()和new FormData(form)提前取值
示例：
const dialog = document.querySelector('dialog');
const form = dialog.querySelector('form');
dialog.addEventListener('close', () => {
// 注意：这里读不到最新值！因为 close 已发生
});
// 正确做法：在点击“确认”按钮时读取并关闭
document.querySelector('#confirm-btn').addEventListener('click', () => {
const data = Object.fromEntries(new FormData(form));
dialog.close(JSON.stringify(data)); // 仅作标识，非真正传输数据
});
returnValue 的实际用途只是轻量状态标识，不是数据容器
dialog.close('submit') 中的 'submit' 会被反映在 dialog.returnValue 上，但它只能是字符串，且长度和结构无约束。它适合表达“用户点了确定/取消/删除”这类离散动作，不适合传对象、数组或长文本。
常见误用与影响：
- 试图
dialog.returnValue = {name: 'Alice'}→ 报错TypeError: Cannot set property returnValue - 传 JSON 字符串但不解析 → 后续要用
JSON.parse(dialog.returnValue)，容易漏 try/catch - 在 Safari 中，
returnValue在某些关闭方式（如 Esc 键）下为空字符串，而非undefined，需显式判断dialog.returnValue === ''
替代方案：用 Promise + 自定义事件更可控
如果真需要“等待对话框返回结构化数据”，推荐封装成 Promise，把数据作为 resolve 参数，而不是依赖 returnValue。这样逻辑清晰，错误处理也方便。
关键点：
- 不依赖
dialog.returnValue做业务判断 - 在按钮点击、表单 submit 等明确交互点收集数据并 resolve
- 对
cancel事件单独 reject 或返回 null - 避免在
close事件里做异步操作（比如 fetch），因为此时 dialog 已关闭，视觉上已消失
简略示意：
function showModal() {
return new Promise((resolve, reject) => {
const dialog = document.querySelector('dialog');
dialog.querySelector('#ok').onclick = () => {
const data = { value: dialog.querySelector('input').value };
resolve(data);
dialog.close();
};
dialog.querySelector('#cancel').onclick = () => reject('cancelled');
dialog.showModal();
});
}
showModal().then(data => console.log(data)); // 拿到的是你主动传的 data
真正麻烦的不是怎么读 returnValue，而是很多人默认它该像 window.prompt() 那样“自动带回输入值”——它不是。数据在哪，永远取决于你什么时候、从哪读的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
