javascript - 哪种按钮类型应该用于 HTML 对话框取消按钮？

Question

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

研究

<dialog> 上的 MDN 页面elements 提供了一个示例，其中 <button> (没有类型属性)用于取消和确认按钮:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Advanced_example

HTMLDialogElement.showModal() 上的 MDN 页面函数提供了一个类似的例子，其中 <button type="reset">用于取消按钮:https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

我也在网上四处阅读，包括本网站上的一些答案，其中 <input type="button">用于推荐示例。

总结一下我的理解:

• 省略类型或type="button"按钮并不意味着该按钮将提交有效表单，也不意味着该表单将明确重置您的数据条目。然而，与 type="submit" 不同，它们要求您编写更多 JavaScript 来关闭对话框。 .标记也不表示这是关闭对话框表单的方法之一。

• 带有 type="reset" 的按钮暗示数据条目将被清除并且需要 event.preventDefault() 来与标记相矛盾。然而，重置并不理想(https://ux.stackexchange.com/a/42773)，您仍然需要编写 JavaScript 来关闭对话框，并且由于使用 JavaScript 关闭表单或您决定阻止数据重置，按钮的功能与标记相矛盾。

• 带有 type="submit" 的按钮可能意味着关闭/完成对话框的替代方法，并且在单击提交类型按钮时对话框会自动关闭。您只需要 JavaScript 来监听关闭事件并检查 <dialog>的 returnValue 属性以查看取消是否发生。但是，标记/提交类型可能暗示表单将提交有效条目而不是取消。

考虑到这一点，如果我的理解是正确的(？)，以及我可能忘记的任何其他原因(关于什么标记最易读并且呈现最优雅的 JavaScript 使用)，取消按钮应该采用哪种方法以对话形式？

示例:

<dialog id="forCloseEventListener">
  <form method="dialog">
    <input type="text" name="data-entry" placeholder="Enter your post code">
    <input type="??" value="Cancel">
    <input type="submit" value="OK">
  </form>
</dialog>

P.S.:我注意到有一个实验性的 HTMLDialogElement“取消”事件，但它可能会发生变化，而且它的 MDN 页面似乎不准确或不完整。

Answer 1

类型 type="button" 是最好的选择。您可以编写一个函数并在 onclick 事件中使用以根据需要退出模态。

如果您使用submit 或reset，您将需要使用event.preventDefault() 来阻止它们的默认行为。