button标签必须设type属性，否则在form内默认为submit导致意外提交；非提交按钮应显式写type="button"；推荐用addEventListener而非onclick；状态切换需结合dataset和ARIA；移动端需viewport声明和JS控制点击态。
button 标签必须设 type 属性，否则可能意外提交表单
浏览器对 <button> 的默认 type 是 submit，只要它在 <form> 内，点击就会触发表单提交——哪怕你没写任何 JS，页面也可能刷新或跳转。这不是 bug，是规范行为。
避免误提交的实操建议：
- 所有非提交用途的按钮，显式写上
type="button" - 如果按钮确需提交，用
type="submit"，并确保form元素有对应处理逻辑（如监听submit事件而非click） - 不要依赖 CSS 隐藏表单或 JS 阻止默认行为来“补救”，那属于掩盖问题
onclick 属性能用，但不推荐用于复杂交互
onclick 属性写法简单：<button onclick="alert('hello')">点我</button>，适合一次性调试或极简场景。但它把逻辑硬编码进 HTML，导致：
- 无法复用同一段 JS 逻辑绑定多个按钮
- 不方便统一管理事件（比如批量禁用、添加日志、做权限拦截）
- 调试时看不到事件监听器堆栈，Chrome DevTools 的 Event Listeners 面板里查不到
更稳妥的做法是用 addEventListener：
const btn = document.getElementById("my-btn");
btn.addEventListener("click", function() {
console.log("按钮被点了");
});
按钮状态切换（如“展开”→“收起”）别只改 textContent
单纯用 this.textContent = "收起" 虽然能换文字，但会丢失语义和可访问性。用户用键盘 Tab 切入按钮时，屏幕阅读器读出的仍是旧文本；而且没有视觉反馈区分当前状态。
推荐组合方案：
- 用
dataset记录状态：btn.dataset.state = "expanded" - 配合 ARIA 属性更新：
btn.setAttribute("aria-expanded", "true") - CSS 用属性选择器控制样式：
button[aria-expanded="true"] { background: #4a90e2; }
移动端点击延迟与伪类失效是真实存在的坑
在 iOS Safari 和部分安卓 WebView 中，:active 伪类可能不触发，或者点击后要等 300ms 才响应——这不是你代码写错了，是浏览器为双击缩放保留的兼容机制。
绕过方式很直接：
- 给
<head>加 viewport 声明：<meta name="viewport" content="width=device-width, initial-scale=1"> - 给按钮加
cursor: pointer（虽不影响功能，但能激活部分 UA 的快速点击模式） - 真要精确控制点击态，用 JS 切换 class：
btn.classList.add("is-pressed")，再配 CSS.is-pressed { transform: scale(0.95); }
别指望纯 CSS 的 :active 在所有移动设备上稳定生效，该上 JS 的地方就别省那几行。
