阻止按钮刷新页面的几种方法
时间：2026-02-07 08:30:44 111浏览 收藏
你在学习文章相关的知识吗？本文《阻止按钮点击后页面自动刷新的方法主要有以下几种：1. 使用 event.preventDefault()（推荐）如果你是通过 ，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！
通过 JavaScript 的 `event.preventDefault()` 方法可阻止表单默认提交行为，避免页面刷新，同时保留按钮功能并支持后续逻辑处理。
在 HTML 表单中，<input type="submit"> 或
✅ 正确做法是：保留语义清晰的按钮类型，用 JavaScript 显式拦截默认行为。推荐使用现代、可维护的方式重构代码：
✅ 推荐方案：使用 event.preventDefault() + 事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>防刷新按钮示例</title>
</head>
<body>
<form id="myForm" method="GET">
<input type="submit" name="buttonV" value="执行操作 V">
<input type="submit" name="buttonS" value="执行操作 S">
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // ? 关键：阻止页面刷新和默认提交
const formData = new FormData(e.target);
const action = formData.get('buttonV') ? 'V' :
formData.get('buttonS') ? 'S' : null;
if (action === 'V') {
function1();
} else if (action === 'S') {
function2();
}
});
function function1() {
console.log('✅ 已执行 function1（前端）');
// 这里可发起 AJAX 请求调用 PHP 后端，例如：
// fetch('handler.php?buttonV=1').then(r => r.json()).then(console.log);
}
function function2() {
console.log('✅ 已执行 function2（前端）');
// 同上，按需调用后端接口
}
</script>
</body>
</html>⚠️ 注意事项：
- PHP 侧逻辑需同步调整：原代码中依赖 $_GET 参数触发函数，但前端已阻止提交 → 此时 PHP 不再被动接收请求。如仍需服务端处理，请改用 fetch() 或 XMLHttpRequest 主动发送 API 请求（推荐 RESTful 方式），避免混合前后端逻辑。
- 不要混用 onclick 和表单提交：<input onclick="..."> 在 type="submit" 下会先执行 JS，但无法阻止后续提交（除非显式 return false 且内联写法正确），易出错；应统一用 addEventListener 控制流程。
- 无障碍与语义化：使用
✅ 总结：
阻止刷新的核心不是“去掉 submit”，而是“接管 submit”——用 event.preventDefault() 拦截默认行为，再通过 JS 自主决定是否发送请求、更新 UI 或调用后端。这是现代 Web 开发的标准实践，兼顾兼容性、可维护性与用户体验。
到这里，我们也就讲完了《阻止按钮刷新页面的几种方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！
相关阅读
更多>
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
252 收藏
-
354 收藏
-
272 收藏
-
328 收藏
-
152 收藏
-
443 收藏
-
197 收藏
-
233 收藏
-
242 收藏
-
139 收藏
-
389 收藏
-
360 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 485次学习