按钮需显式设 type="button"防误提交；推荐 addeventlistener 而非 onclick；视觉反馈应 js 控制 class；跳转优先用语义化 a 标签；必须保障可访问性。
button 标签本身不带交互反馈，必须配合 JavaScript 才能触发逻辑；视觉反馈（如按压态）需靠 CSS 控制，而行为反馈（如防重复点击、状态同步）得靠 JS 主动管理。
为什么点击没反应？检查 type 属性是否被忽略
浏览器对 button 的默认 type 是 submit。如果它意外出现在 form 标签内，点击就会提交表单——页面刷新或跳转，看起来像“没反应”，其实是逻辑被中断了。
- 非提交用途的按钮，必须显式写
type="button" - 提交按钮用
type="submit"，并在form上监听submit事件，而不是click - 别用
event.preventDefault()补救，那只是掩盖type配置错误
onclick 和 addEventListener 哪个更可靠？
onclick 是内联写法，适合快速验证；addEventListener 是解耦方案，更适合生产环境。两者都能工作，但行为差异明显：
-
onclick只能绑定一个函数，后赋值会覆盖前一个 -
addEventListener支持多次调用，同一事件可注册多个处理器 -
addEventListener可以用removeEventListener精确解绑，适合动态场景（如模态框开关） - 若按钮是 JS 动态插入的，
onclick属性可能在 DOM 尚未就绪时就被读取，推荐用事件委托或确保脚本在DOMContentLoaded后执行
如何让按钮点击有“按下”视觉反馈？
移动端和桌面端对 :active 伪类支持不一致，纯 CSS 往往不可靠。稳妥做法是用 JS 切换 class：
- 给按钮加
class="btn"，CSS 定义.btn:active和.btn.pressed - 在
addEventListener("click", ...)中手动添加/移除pressed类 - 配合
dataset记录状态，比如btn.dataset.clicked = "true"，避免重复触发异步操作 - 对长耗时操作（如 API 调用），点击后立即设
btn.disabled = true，完成后恢复，比仅靠视觉反馈更防误操作
跳转页面时 button 怎么写才不翻车？
用 button 实现跳转，本质是执行 JS 导航，不是语义化行为。常见错误包括：
- 写成
<button onclick="location.href='xxx'"></button>却忘了type="button"，导致在form内双触发 - 用
window.open()但没处理弹窗拦截（尤其无用户手势上下文时） - 误用
<a href="xxx"><button>...</button></a>：HTML 规范不允许button作为a的子元素，部分浏览器会自动拆解结构，破坏样式或事件流 - 真正需要导航语义，优先用
<a></a>；需要按钮外观，用 CSS 把a伪造成按钮，而非反向嵌套
最易被忽略的点：按钮的可访问性（a11y）不是锦上添花，而是基础要求。哪怕只是加个 aria-label 或确保焦点可见，都直接影响键盘用户能否完成操作——这点在测试阶段常被跳过，上线后才发现 Tab 键卡死在按钮上。
