按钮点击后函数未执行，主因是表单默认提交导致页面刷新中断js；应优先用submit事件监听+preventdefault，或改button type为button，确保函数全局可访问且dom就绪。
button type="submit" 点击后函数没执行？先检查表单默认提交行为
表单里的 button 或 input type="submit" 默认会触发表单提交，页面刷新或跳转，导致绑定的 JavaScript 函数只运行一半甚至完全不执行。这不是代码写错了，而是浏览器在「抢控制权」。
常见现象：alert 没弹出、console.log 没输出、异步请求没发出去——其实函数刚进第一行就被中断了。
- 最直接的解决办法：给
button显式设置type="button"，彻底关闭提交语义 - 如果确实需要提交表单，又想先跑 JS 逻辑，用
event.preventDefault()阻止默认行为，再手动调用form.submit() - 别在
onclick="myFunc()"里直接写window.location.href跳转，容易和表单提交冲突；统一收口到函数内部处理
onclick 属性调用函数失败？确认函数在全局作用域且已定义
onclick 是内联事件属性，它依赖全局变量查找机制：点击时，浏览器会从 window 对象上找同名函数。一旦函数被包裹在模块、IIFE、或 DOMContentLoaded 回调里，就找不到。
典型错误写法：
<script>
(function() {
function handleClick() { /* ... */ }
})();
</script><button onclick="handleClick()">点我</button>——函数根本不在全局，点击报 ReferenceError: handleClick is not defined。- 确保函数声明在顶层
<script></script>中，或显式挂到window.handleClick = function() { ... } - 避免把
<script></script>放在里却没加defer，否则 DOM 元素还没生成，onclick绑定无意义（虽然不会报错，但点击无效） - 函数名拼写大小写必须完全一致，
handleclick()≠handleClick()
addEventListener 绑定 click 事件更可靠，但要注意 DOM 就绪时机
相比 onclick 属性，addEventListener 不依赖全局命名，支持多次绑定、可移除、兼容性好，是现代写法首选。但它有个硬性前提：目标元素必须已存在于 DOM 中。
错误示范：
<script>
const btn = document.getElementById("myBtn");
btn.addEventListener("click", myHandler); // btn 是 null！
</script><button id="myBtn">点我</button>脚本执行时按钮还没解析，btn 为 null，后续绑定失败。- 把
<script></script>放在前是最简单稳妥的做法 - 或者用
DOMContentLoaded包一层：document.addEventListener("DOMContentLoaded", () => { /* 绑定逻辑 */ }) - 若按钮是动态插入的（比如 AJAX 后渲染），要用事件委托，监听父容器的
click，再用event.target.matches("#myBtn")判断来源
表单中混合使用 submit 和自定义逻辑时，优先用 event.preventDefault()
当按钮既要验证数据、发请求、更新 UI，又要最终提交表单，硬拆成「先 JS 后手动 submit」容易漏掉表单原生能力（如 form.reportValidity()、自动聚焦错误字段）。不如让 JS 控制整个流程。
正确姿势是在 submit 事件上监听，而不是 click：
- 监听
submit事件比监听click更语义准确，能捕获回车提交、form.submit()调用等多种触发方式 - 用
form.checkValidity()复用浏览器原生校验，不用重复写正则 - 注意：不要在
submit处理函数里再调用e.target.submit()，会死循环
表单按钮触发 JS 的关键不在“怎么绑”，而在“谁先执行”——浏览器默认行为和 JS 逻辑之间存在天然竞争，所有失效问题几乎都源于对这个竞争关系的忽略。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
