最常见原因是事件绑定时机不对——DOM元素未加载完脚本就执行，导致document.getElementById返回null或querySelector找不到目标；应将脚本移至</body>前或用DOMContentLoaded包裹，同时检查控制台ReferenceError及函数作用域。
按钮点击没反应，onclick 为什么不执行
最常见原因是事件绑定时机不对——DOM 元素还没加载完，脚本就执行了 onclick 赋值或 addEventListener。浏览器找不到目标元素，自然不会响应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把 JS 放在
</body>前，或用DOMContentLoaded包裹初始化逻辑 - 检查控制台是否有
Uncaught ReferenceError，确认函数名拼写和作用域（比如函数定义在另一个<script>块里但未提升） - 避免在内联
onclick="doSomething()"中调用未声明的变量或使用this指向混乱（推荐改用addEventListener） - 若按钮是动态插入的（如 AJAX 加载后 append），需用事件委托：
document.addEventListener('click', e => { if (e.target.matches('.my-btn')) { ... } })
button 和 input type="button" 到底该用哪个
语义和行为差异比想象中大：前者是完整标签，支持子元素（图标、span）、无障碍属性（aria-expanded）更灵活；后者是自闭合控件，只接受 value 属性，不能嵌套内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只要需要放图标、多行文本、或配合
role/aria-做复杂交互，一律用<button> - 表单中提交/重置按钮必须用
<button type="submit">或<input type="submit">，不能省略type—— 否则在某些浏览器中默认为submit，可能意外触发表单提交 -
input type="button"仅适合极简场景（如旧系统兼容、纯 JS 控制的无内容触发器），且无法通过 CSS 的::before/::after添加伪元素
按钮禁用后样式失效，disabled 状态怎么自定义
原生 disabled 会屏蔽所有用户交互，同时重置大部分 CSS 样式（尤其 background、color 在不同浏览器中表现不一）。直接写 button:disabled { opacity: 0.5; } 往往不生效或颜色错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
pointer-events: none+opacity组合模拟禁用态，保留样式可控性（注意：这不阻止键盘焦点，需额外加tabindex="-1"） - 真要用
disabled，务必显式重置关键样式：button:disabled { background: #ccc; color: #666; cursor: not-allowed; } - 避免依赖
:disabled做状态判断逻辑——它无法被 JavaScript 监听变化，应配合 class（如.is-disabled）统一管理状态和样式 - 无障碍要求：禁用态按钮仍需保留在 tab 键顺序中（除非明确移除），且屏幕阅读器需感知状态，所以
aria-disabled="true"比纯 CSS 更可靠
移动端按钮点透、延迟或双击放大，怎么破
iOS Safari 和部分 Android 浏览器对 <button> 有默认 300ms 点击延迟（为双击缩放留判定时间），还可能因父容器未设 width 导致点透到下层元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局加
touch-action: manipulation到按钮或其容器，可消除延迟并禁用双击缩放 - 确保按钮有明确尺寸（哪怕
min-width: 44px; min-height: 44px），避免 iOS 将小区域识别为不可点击 - 点透问题多因
position: fixed/absolute元素未设z-index或父级overflow: hidden截断事件流，检查层级和 overflow 设置 - 不要用
ontouchstart替代onclick——现代框架（React/Vue）已内置防点透处理，手动绑定反而易出错
按钮看似简单，但跨浏览器、跨设备、跨交互模式下的行为差异藏得深。真正稳定的方案，从来不是“写个 onclick 就完事”，而是从语义选择、状态管理、事件时机、无障碍支持四个维度同步校准。
