时间戳

首页 > 解决方案 > 使用带有 e.preventDefault() 的提交按钮与常规按钮

javascript - 使用带有 e.preventDefault() 的提交按钮与常规按钮

问题描述

我正在关注关于客户端存储的 MDN 文章（https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage），我遇到了一段代码我有一个问题。该示例应该展示如何使用 Web Storage API 进行简单的数据持久性，因此它让我们在表单字段中输入名称，以便保存该数据并呈现跨会话持久的个性化问候语。为了接受用户输入，它使用一个<input type="submit">按钮，然后在其上附加一个事件监听器form.addEventListener('submit', function(e) { e.preventDefault(); }); 我在很多文章中都注意到了这种模式，所以我的问题是为什么我们应该使用提交按钮并防止默认提交行为而不是仅仅创建一个常规按钮？各有优势吗？需要明确的是，我不是在问为什么一般<input type="submit">应该使用over ；我想知道为什么在我们有或时不需要提交的情况下使用。<button> <input type="submit"><button><input type="button">

标签： javascript

解决方案

form.addEventListener('submit', function(e) { e.preventDefault(); });

不是绑定到按钮，而是绑定到表单提交。例如，用户可以通过按 Enter 提交表单。在移动设备上，键盘可能提供类似的功能。使用辅助技术的人也可能有其他选择。

这很重要，因为您向浏览器表达了意图。

拥有一个只有按钮本身可以工作的表单可能会非常令人困惑，但您可能习惯于使用其他方式不起作用。

推荐阅读