按钮点击没反应，首要检查onclick函数是否拼错、未声明或被覆盖；应优先使用addeventlistener替代内联onclick，避免命名污染和覆盖风险。
按钮点击没反应？检查 onclick 是否被覆盖或未定义
很多“按钮不工作”的问题，其实不是 HTML 写错了，而是 JavaScript 里 onclick 绑定的函数名拼错、没声明，或者被后续代码覆盖。比如写成 onclick="handelClick()"（少了个 n），浏览器控制台会报 ReferenceError: handelClick is not defined，但页面上啥也不提示。
- 优先用
addEventListener替代内联onclick，避免命名污染和覆盖风险 - 如果必须用内联写法，确保函数已在全局作用域声明，且拼写完全一致（包括大小写）
- 在 DevTools 的 Console 中手动执行一遍函数名，确认返回
function而非undefined
按钮样式失效？别只改 <button></button>，注意默认样式重置冲突
重构时常见把旧按钮换成语义化 <button type="button"></button>，结果圆角没了、边框变粗、文字居中偏移——这往往是因为 CSS 重置库（如 Normalize.css）或自定义 reset 规则对 button 做了统一处理，而你只改了 class 名，没同步更新对应样式。
-
button元素自带user-select: none和cursor: pointer，删掉这些可能让交互感丢失 - Chrome/Firefox 对
button默认加border: outset，若用border: none后又没设background，按钮会“消失” - 移动端点击区域过小？补上
min-width: 44px和min-height: 44px（iOS 可触控最小尺寸）
表单提交按钮误触发？必须显式设置 type 属性
没写 type 的 <button></button> 在表单里默认是 submit，哪怕你只想做个“取消”按钮，点一下整个表单就提交了。这是最隐蔽也最常被忽略的坑。
- 纯操作按钮（如“复制链接”“展开详情”）一律写
<button type="button"></button> - 确认提交用
<button type="submit"></button>，并配合form属性指向对应表单 ID（尤其在模态框里嵌套表单时） - 重置按钮用
<button type="reset"></button>，但注意它会清空所有字段，包括disabled或readonly的输入项
无障碍支持被忽略？aria-label 和 disabled 状态必须同步
按钮文字是图标（如 <button><svg>...</svg></button>）时，屏幕阅读器读不出功能；点了按钮后状态变成禁用，但 aria-disabled="true" 没同步更新，辅助技术用户仍会尝试操作。
- 无文本按钮必须加
aria-label（如<button aria-label="删除此项"></button>） - JS 控制禁用状态时，同时设置
disabled属性和aria-disabled="true"，否则部分读屏软件识别不一致 - 禁用按钮不要仅靠灰度样式判断可用性，要确保
pointer-events: none和tabindex="-1"一并生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
