在前端开发中，我们通常使用表单来收集用户信息，并将该信息提交到服务器进行处理。但是有时候，我们可能需要在表单中添加一个按钮，允许用户输入完数据后暂时不提交表单，而是执行其他操作。
那么，如何制作一个按钮，可以在表单中停止默认的提交行为呢？下面是一些方法：
方法一：使用 type 属性为 button
HTML 表单元素中，按钮元素有三种类型：submit、reset、button。其中，submit 和 reset 类型会触发表单的提交或重置行为。而 type 属性为 button 的按钮则不会做任何默认行为，只会执行其绑定的 JavaScript 函数，从而实现自定义功能。
以下是一个示例代码：
-- -------------------- ---- ------- ------ ------ ----------- --------------- --------------------- ------ --------------- --------------- -------------------- ------- ------------- ---------------------------------- ------- -------- -------- ------------ - -- ------------ - ---------
在上述示例中，我们使用了 type 属性为 button 的 <button> 元素，并给它绑定了一个 onclick 事件，当用户点击该按钮时，会执行 myFunction() 函数。
需要注意的是，在 myFunction() 函数中要阻止表单的默认提交行为，可以使用 event.preventDefault() 方法。例如：
function myFunction(event) {
event.preventDefault();
// 在这里编写自己的逻辑代码
}方法二：使用事件监听
除了给按钮元素绑定 onclick 事件外，还可以使用事件监听的方式实现相同的效果。例如：
-- -------------------- ---- ------- ----- ------------ ------ ----------- --------------- --------------------- ------ --------------- --------------- -------------------- ------- ------------------------- ------- --------------------------- ------- -------- --- ------ - ---------------------------------- --- -------- - ------------------------------------ ---------------------------------- --------------- - ----------------------- -- ------------ --- ---------
在上述示例中，我们使用了 addEventListener() 方法为按钮元素添加了一个 click 事件监听器，在该监听器内部阻止了表单默认的提交行为，并执行了自定义的逻辑代码。
需要注意的是，在使用事件监听的方式时，要确保在逻辑代码执行完成后手动调用表单的 submit() 方法，以便在需要时能够提交表单。例如：
myButton.addEventListener("click", function(event) {
event.preventDefault();
// 在这里编写自己的逻辑代码
myForm.submit(); // 手动提交表单
});总结
通过以上两种方法，我们可以轻松地在表单中添加一个按钮，实现自定义功能而不提交表单。需要注意的是，在自定义逻辑代码中要防止 XSS 攻击等安全问题，同时也要合理运用 HTML、CSS 和 JavaScript 等前端技术，为用户提供更加友好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8339