移动端按钮点击延迟是浏览器300ms双击缩放等待策略，非滑动问题；解决只需viewport meta完整+button加touch-action: manipulation；按压反馈用:active伪类配合css transition实现，勿误绑touch事件或滥用物理模型。
移动端按钮点击延迟不是滑动，别混淆“阻尼滑动”和“点击响应”
你遇到的“按钮阻尼滑动响应”，大概率是误把点击延迟当成了滑动反馈——HTML <button></button> 本身不滑动，也不会有阻尼感。真正需要阻尼的是轮播图、抽屉菜单、转盘这类可拖拽元素；而按钮只需解决 300ms 点击延迟。如果点按钮时页面跟着滑动、或手指一碰就拖动了容器，说明你没管好 touch-action，或者错误地给按钮绑了 touchmove 监听器。
按钮点击卡顿的根因和最简解法
iOS 和旧版 Android 浏览器对 click 事件保留约 300ms 延迟，只为等双击缩放。这不是 JS 慢，是浏览器策略。修复它不需要写物理模型，只要两件事：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">必须完整存在，缺一不可 - 按钮上加 CSS：
touch-action: manipulation;
后者是现代解法：Chrome 36+、Safari 9.3+、Firefox 60+ 都支持，直接跳过双击等待，且不影响 zoom 或滚动。别用 touch-action: none——它会锁死所有交互，按钮变“不可点”。
真要实现按钮按压阻尼反馈？别硬套物理模型
用户点按钮时想要“按下去再弹回”的触感，本质是视觉反馈，不是运动阻尼。强行用 requestAnimationFrame + 弹簧方程模拟，反而增加主线程负担、触发重排。正确做法是：
- 用
:active伪类做即时缩放或背景色变化：transform: scale(0.96); - 配合
transition: transform 0.12s cubic-bezier(0.3, 0, 0.15, 1);—— 这个贝塞尔曲线比线性更接近真实按压回弹节奏 - 避免在
touchstart里调preventDefault()：按钮不需要拦滚动，加了反而干扰 focus 和键盘操作
如果你发现按按钮时页面轻微晃动或内容偏移，检查是否父容器设置了 will-change: transform 或 transform: translateZ(0)，这些会触发合成层切换，导致视觉抖动。
误绑 touch 事件导致按钮变“滑块”的典型场景
常见错误是全局监听 touchstart 并无差别调 preventDefault()，结果所有按钮都失去点击能力，手指一碰就开始拖拽页面。尤其注意：
- 别在按钮上监听
touchmove：它本就不该响应滑动 - 如果按钮嵌在可滑动区域（如轮播容器），确保父级设了
touch-action: pan-x或pan-y，而不是none - 测试时用真机两指快速滑过按钮——若页面跟着滚，说明
touch-action没生效或被父级覆盖
真正的阻尼滑动只属于可拖拽元素；按钮的职责是明确、及时、可访问的响应。把交互意图分清楚，比堆物理参数更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
