dialog 的 close 事件仅在显式调用 close()、点击外部蒙层（未禁用 backdrop）或按 esc 键时触发，不响应内部按钮点击；取消按钮需手动绑定 click 并调用 close()，通过 returnvalue 区分关闭原因，但 safari 不支持 returnvalue 且需注意焦点管理。
dialog 元素的 close 事件什么时候触发
只有当 dialog.close() 被显式调用，或用户点击 dialog 外部蒙层（且未禁用 backdrop）、按 Esc 键时，close 事件才会触发。它**不响应**点击内部按钮（比如“取消”按钮）本身——除非你手动调用 close()。
取消按钮必须主动调用 dialog.close()
很多人误以为给取消按钮加 type="button" 就能自动关闭，其实不会。dialog 不会自动绑定任何按钮行为。
- 取消按钮需绑定
click事件，并在回调里执行myDialog.close() - 避免写成
myDialog.hideModal()—— 这个方法只隐藏但不触发close事件，后续监听会失效 - 如果取消前需要确认（如表单已修改），在
click回调里做判断，条件满足再调close()
监听 close 事件获取关闭原因
close 事件本身不带关闭来源信息，但可以通过 dialog.returnValue 区分是“确认”还是“取消”：
- 在确认按钮里设
myDialog.returnValue = "confirm"，再调close() - 在取消按钮里设
myDialog.returnValue = "cancel"，再调close() - 监听
close事件时读取event.target.returnValue，就能知道用户意图
示例：
myDialog.addEventListener('close', () => {<br> if (myDialog.returnValue === 'cancel') {<br> console.log('用户点了取消');<br> }<br>});
容易忽略的兼容性和副作用
Chrome 110+、Firefox 111+、Safari 17.4+ 支持原生 dialog，但 Safari 仍不支持 returnValue（返回空字符串）。更麻烦的是：
- 调用
close()后，open属性立即变为false，但 DOM 渲染可能有微小延迟，别在close后立刻操作内部元素 - 如果 dialog 是通过
showModal()打开的，close()会移除焦点锁定，但不会自动把焦点还给触发按钮——需要手动triggerBtn.focus() - 不要在
close事件里再次调close()，会报错 “InvalidStateError: Dialog is not open”
真正要小心的，是 returnValue 在 Safari 的缺失，以及焦点管理这种看不见却影响体验的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
