最简按压效果是用:active伪类配合transform: scale(0.98)，并添加cursor: pointer确保iOS Safari触发；需在默认样式中声明transition: transform 0.15s ease以实现平滑动画。
按钮点击时没有视觉反馈，怎么加最简按压效果
纯 CSS 就能解决，不需要 JS。关键不是加动画，而是用 :active 伪类匹配按下瞬间的状态。很多人为追求“动效”反而绕远路写 JS 监听，结果在移动端点不灵——因为 :active 在 iOS Safari 上默认不触发，得先给元素加 cursor: pointer 或绑定空 ontouchstart。
- 最简写法：
button:active { transform: scale(0.98); } - 要兼容 iOS：给按钮加
style="cursor: pointer;"，或在 JS 里执行一次document.body.addEventListener('touchstart', () => {}, {passive: true}); - 别用
opacity变化做点击反馈，视觉上像“消失”，用户会误判是否点中
想让按钮点击后保持选中状态，该用 class 还是 :checked
取决于按钮类型。:checked 只对 <input type="checkbox"> 或 <input type="radio"> 有效，且必须配合 <label> 关联；普通 <button> 必须靠 JS 切换 class。常见错误是给 <button> 写 button:checked，这永远不生效。
- 单个开关按钮：用
<input type="checkbox" id="toggle"><label for="toggle">开关</label>，然后写input[type="checkbox"]:checked + label { background: #4CAF50; } - 多个互斥选项：用
radio+name属性，:checked自动排他 - 纯
<button>场景：JS 里用btn.classList.toggle('active')，CSS 定义button.active { background: #2196F3; }
点击按钮后页面跳转或提交，但想阻止默认行为怎么办
核心是调用 event.preventDefault()，但时机很关键。如果按钮类型是 type="submit" 且在 <form> 里，不阻止就会立刻提交；如果是 type="button" 却写了 onclick="location.href=..."，又容易和 JS 逻辑冲突。
- 表单内按钮：优先用
<button type="button">，避免意外提交；真要提交就用form.onsubmit = e => { e.preventDefault(); /* 自定义逻辑 */ } - 链接式按钮：用
<a href="#" onclick="doSomething(); return false;">不如直接<a href="#" onclick="e => { e.preventDefault(); doSomething(); }"> - React/Vue 等框架里，
@click.prevent或onClick={e => { e.preventDefault(); ... }}更稳妥
按钮点击音效或震动反馈，移动端要注意什么
Web 标准不支持直接播放音效或调用设备震动，得靠 AudioContext 和 navigator.vibrate()，但两者都有硬性限制：必须在用户手势（如 click）回调里首次触发，否则被浏览器静音或拒绝。
立即学习“前端免费学习笔记（深入）”；
- 播放提示音：先创建
new AudioContext()，再在 click 回调里解码并播放，不能提前初始化 - 调用震动：只支持数组参数，如
navigator.vibrate([15])（震动 15ms），navigator.vibrate(100)在部分 Android 上已弃用 - iOS 完全禁用
vibrate()，且 AudioContext 首次播放需用户交互确认，别指望自动响
这些交互细节藏得深，但漏掉一个，用户点下去就毫无响应感——尤其在车载或 kiosk 场景下，反馈缺失等于功能失灵。
