点击按钮没反应，90%因touchstart被preventdefault()或pointer-events:none拦截；ios :active失效需加cursor:pointer和display:block/inline-block；压感反馈应结合touchstart/touchend加class与will-change:transform；响应延迟需设touch-action:manipulation。
为什么点击按钮没反应？先检查 touchstart 是否被阻止
移动端按钮点击无反馈，90% 是因为默认的 touchstart 事件被 preventDefault() 或 CSS 的 pointer-events: none 意外拦截。浏览器在触摸开始时会触发 touchstart，紧接着才是 click；如果前者被阻止且没做手动 dispatch，后续的 click 就不会触发——尤其在封装了 fastclick 或用了某些 UI 库时容易踩坑。
- 检查是否对父容器或按钮本身调用了
e.preventDefault()，尤其在监听touchmove时误加在touchstart上 - 确认没有全局设置
* { -webkit-tap-highlight-color: transparent; }同时又忘了补outline: none导致视觉反馈消失 - 用 Chrome DevTools 的「Rendering」面板开启 “Show touch response” 可直观看到触摸高亮是否生效
:active 伪类在 iOS 上失效？加这三行 CSS 就行
iOS Safari 对 :active 的支持有硬性限制：必须给元素加上 cursor: pointer，且该元素不能是纯静态文本流中的 div（比如没设 display: block 或没绑定任何事件）。否则触摸瞬间样式不应用，用户感觉“点不动”。
- 给按钮加
style="cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0.2);" - 确保它不是
display: inline（默认值），至少设为display: inline-block或block - 如果用
button标签，iOS 默认支持:active；但若用div+onclick，就必须显式声明可交互性
如何让按钮按下时有真实“压感”？别只靠 transform: scale()
单纯用 :active { transform: scale(0.95); } 在低端安卓机上常出现延迟或跳变，因为 CSS 动画依赖主线程，而触摸事件可能被 JS 任务阻塞。真正可靠的压感反馈要结合事件时机与硬件加速。
- 在
touchstart回调里立即加 class（如is-pressed），用transform+will-change: transform触发 GPU 渲染 - 在
touchend或touchcancel里移除 class，避免手指滑出后状态残留 - 避免同时修改
background-color和transform——颜色变化走 CPU，缩放走 GPU，混用易卡顿
按钮响应慢、连点失效？关键在 touch-action 配置
默认情况下，移动端浏览器会对所有元素启用 touch-action: auto，意味着它要预留判断手势的空间（比如区分点击和双指缩放），这会引入约 300ms 延迟。按钮这类明确用于点击的控件，应主动关闭无关手势。
- 给按钮加
style="touch-action: manipulation;"——这是最安全的选择，允许 pinch-zoom 但禁用 scroll/drag 判断，消除延迟 - 绝对不要写
touch-action: none，否则连click都不会触发 - 若按钮在滚动容器内（如
overflow-y: auto的 div），需确保父容器没设touch-action: pan-y覆盖子元素行为
真实压感和即时反馈不是靠堆 CSS 动画实现的，而是对 touchstart/touchend 生命周期的精确控制，以及对 touch-action 和渲染线程分工的清醒认知。漏掉任意一环，用户都会觉得“按钮不跟手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
