最近帮朋友搭一个活动报名页，做完测试时发现点击“注册”按钮完全没反应。页面看着挺正常，输入框填满了，验证码也勾了，可就是没法提交。一开始以为是后端接口问题，结果查了一圈，问题出在前端几个不起眼的细节上。
检查按钮类型是不是 button
最常见的坑是按钮的 type 写错了。很多人用 div 或 span 模拟按钮，但这样不会触发表单行为。如果用了原生 <button>，还得确认它的 type 属性：
<button type="submit">注册</button>如果是 type="button"，那它就只是个普通按钮，不会提交表单。这点特别容易忽略，尤其在复制代码片段的时候。
JavaScript 阻止了默认行为
有时候页面加了校验逻辑，JS 里写了 preventDefault()，但条件判断写得不对，导致一直被拦截。比如这样：
document.getElementById('registerBtn').addEventListener('click', function(e) {
e.preventDefault();
if (!validateForm()) {
alert('请检查填写内容');
return;
}
// 提交逻辑...
});看起来没问题，但如果 validateForm() 因为某个 bug 始终返回 false，就会卡住。建议在调试时先临时注释掉 e.preventDefault()，看看原生提交能不能走通。
表单结构被意外打断
有个项目里，设计师为了排版好看，在表单中间插入了一个 <div> 包裹的提示语，结果这个 div 居然嵌套了另一个 form。HTML 不允许 form 嵌套，浏览器会自动闭合第一个 form，导致后面的字段实际不在表单内。最终点击注册时，数据根本收集不全。
解决办法很简单：用浏览器开发者工具选中“注册”按钮，往上找它的父级 form 元素，看是否完整包裹了所有输入项。
样式遮挡也可能导致点不动
有一次排查半天，最后发现是 CSS 的 z-index 问题。页面加了个浮动公告栏，层级太高，刚好盖住了按钮的点击区域。肉眼看按钮是露出来的，但实际上点的是上面一层透明区域。用开发者工具的元素选择器一试，立马发现问题。
遇到点击无反应，不妨打开审查模式，试着点一下按钮位置，看高亮的是不是你想要的那个元素。
别忘了移动端的坑
在手机上测试时，有次怎么点都没反应，PC 端却正常。后来发现是 touch 事件被某个滑动组件劫持了。给按钮加上 pointer-events: auto; 才恢复正常。移动端还要注意按钮太小、间距太密，容易误触或无法触发。
这些问题都不算复杂，但堆在一起就容易让人抓狂。下次再遇到注册没反应，不妨从这些小地方一步步查，往往比翻后端日志来得更快。