Javascript HTML对话框取消按钮应使用哪种按钮类型？

我正在编写带有数据输入字段的HTML对话框表单，其中可以单击“取消”按钮退出模式对话框。“提交”、“重置”和“按钮”类型中的哪一种最适合取消按钮？为什么

研究

元素上的MDN页面提供了一个示例，其中

（不带类型属性）用于取消和确认按钮：

htmldialgelement.showmodel（）

函数上的MDN页面提供了一个类似的示例，其中

用于取消按钮：

我也在网上阅读过，包括这个网站上的一些答案，在推荐示例中使用了

总结一下我的理解：

• 省略的type或

  type=“button”

  按钮并不意味着该按钮将提交有效的表单，也不意味着该表单将显式重置您的数据条目。但是，与

  type=“submit”

  不同，它们要求您编写更多JavaScript来关闭对话框。标记也不表示这是关闭对话框窗体的方法之一

• 带有

  type=“reset”

  的按钮意味着数据条目将被清除，并且需要event.preventDefault（）来与标记冲突。但是，重置并不理想（），您仍然需要编写JavaScript来关闭对话框，并且按钮的功能与标记相矛盾，因为表单正在使用JavaScript关闭，或者您决定阻止数据重置

• 带有

  type=“submit”

  的按钮可能意味着是关闭/完成对话框的替代方法，当单击提交类型按钮时，对话框将自动关闭。您只需要JavaScript来侦听关闭事件，并检查
  的returnValue属性以查看是否发生了取消。但是，标记/提交类型可能意味着表单将与有效条目一起提交，而不是取消

考虑到这一点，如果我的理解是正确的（？），以及我可能不知道的任何其他原因（关于什么标记最具可读性，并且呈现了最优雅的JavaScript使用），那么对于对话框表单中的取消按钮，应该采取哪种方法

样本：

备注：我注意到有一个实验性的HTMLDialogElement“cancel”事件，但它可能会更改，其MDN页面似乎不准确或不完整。

Type

Type=“button”

是最佳选择。您可以编写一个函数并在

onclick

事件中使用，以根据需要退出模式

---

如果您使用

submit

或

reset

，则需要使用

event.preventDefault（）

防止其默认行为。我已将

按钮更新为
type=“Button”
，因为
元素的名称类似，并且它也提交表单。默认行为为“submit”这是最理想的，因此不需要使用
event.preventDefault（）
，因为它关闭
，并将其属性
returnValue=
设置为按钮值，如“取消”。使用说明：