按钮点击无反应需检查onclick是否正确定义在button标签内或通过addEventListener绑定，避免语法错误、函数未定义及模块化脚本导致全局不可见；禁用时推荐CSS类控制pointer-events与键盘事件；换行用white-space等CSS属性而非HTML标签；移动端需设置viewport和touch-action消除延迟。
按钮点击没反应？检查 onclick 是否写在了错误位置
HTML 按钮本身不会自动执行逻辑，onclick 必须直接写在 <button> 标签内，或通过 JS 绑定。常见错误是把 JS 代码写在 HTML 里但漏了引号、括号不匹配，或函数名拼错。
-
onclick="doSomething()"中的doSomething必须已在全局作用域定义（比如<script>里声明过），否则控制台报Uncaught ReferenceError: doSomething is not defined - 避免在
onclick里写长逻辑，只留调用：用onclick="handleClick()"，而不是onclick="console.log('x'); fetch(...);" - 如果用了模块化脚本（
<script type="module">），全局函数不可见，onclick会失效——改用addEventListener
想禁用按钮又保持样式？别只靠 disabled 属性
disabled 确实能阻止点击，但默认会让按钮变灰、失去焦点、无法触发 :hover 和 :active。实际项目中常需要“视觉可用但逻辑锁定”，比如表单校验中等待 API 返回时。
- 用
class="btn-disabled"+ CSS 控制交互：.btn-disabled { pointer-events: none; opacity: 0.6; }，再配合 JS 控制类名切换 - 注意：仅用
pointer-events: none不会阻止键盘触发（如空格/回车），需同时监听keydown并preventDefault() - 表单提交按钮禁用后，若用户刷新页面，
disabled状态不保留，得靠 JS 在加载时重新判断并设置
按钮文字换行或内容溢出？优先用 CSS 而非硬换行
直接在按钮里写 <br> 或用 强制换行，会导致语义混乱、响应式错乱、屏幕阅读器读取异常。
- 给按钮加
white-space: normal（默认是nowrap），再设width或max-width，文字自动折行 - 长文本按钮建议用
text-overflow: ellipsis+overflow: hidden+white-space: nowrap，适用于工具栏等窄空间 - 图标+文字按钮，用
display: inline-flex+align-items: center更稳，比float或vertical-align少踩坑
移动端点按延迟？别忘了 touch-action 和 cursor
iOS Safari 和部分安卓浏览器对 <button> 有约 300ms 点击延迟，不是 bug，是为双击缩放预留的判断窗口。但现代方案已很成熟。
立即学习“前端免费学习笔记（深入）”；
- 最简解法：在
<meta name="viewport">中确保含width=device-width, initial-scale=1，否则touch-action可能不生效 - 给按钮加
style="touch-action: manipulation;"，可消除延迟，且不影响滚动行为 - 加
cursor: pointer不仅是视觉提示，Android Chrome 某些版本下缺失它会导致:active伪类不触发
