Foundation 按钮在 iOS 上点击卡顿是因未禁用 300ms 双击缩放，需对 .button 等元素精准设置 touch-action: manipulation，并避免父容器 touch-action: none、touch 事件监听及 foundation.util.touch.js 干扰。
Foundation 项目在移动端点按钮卡顿，不是 JS 慢，大概率是没关掉浏览器的 300ms 双击缩放等待逻辑。 直接加 touch-action: manipulation 就能解决，但必须加对位置、避开干扰项，否则白配。
为什么 Foundation 的按钮在 iOS 上点着慢
Foundation 默认用 <button> 或带 role="button" 的 <div>，语义没问题，但 Safari 不会自动给所有按钮跳过 300ms —— 它只对明确声明“这里不许双击”的元素生效。而 Foundation 的 CSS（比如 .button 类）默认没设 touch-action，所以延迟照常。
常见错误现象：
• 点击后要等半拍才触发 click，尤其在弹层关闭、切换 tab 时明显
• 同一区域快速连点，第二次点可能被吞或穿透到下层
• 控制台无报错，console.time() 测出来 click 触发时间稳定在 300–320ms
给 Foundation 按钮加 touch-action: manipulation 的实操要点
别全局写 body { touch-action: manipulation }，这会让轮播图、地图、图表全失手势。只打精准补丁：
立即学习“前端免费学习笔记（深入）”；
- 基础按钮：加在 Foundation 的
.button和.primary等变体上 - 自定义交互容器：所有带
onclick、@click或监听click的<div>/<span>，必须显式加touch-action: manipulation - Off-Canvas 触发器：比如
data-open="offCanvasLeft"的按钮，也要单独加 - 避免被覆盖：检查父容器是否设了
touch-action: none（常见于某些模态框 wrapper），子元素设manipulation也无效
示例 CSS：
.button,
.primary,
.secondary,
.menu-icon,
.title-bar button,
[data-open] {
touch-action: manipulation;
}
为什么加了还是慢？几个高频踩坑点
不是 CSS 写错了，而是被其他规则或行为悄悄抵消了：
- 元素绑了
touchstart或touchmove监听器（哪怕空函数），某些 iOS 版本会强制降级回 300ms 行为 - 用了
CSS transform（比如transform: translateZ(0)做硬件加速），部分老 Android 会忽略touch-action - viewport 缺少
user-scalable=no或maximum-scale=1.0，浏览器仍保留双击判断入口 - Foundation 的
js/foundation.util.touch.js被引入后，内部监听了touchstart，和原生优化路径冲突 —— 如果你没用到滑动/拖拽类组件，建议删掉这个 JS 文件
要不要用 FastClick 回退？
不用。FastClick 已过时，且和 Foundation 的事件系统容易打架：它挂载在 document.body，而 Foundation 的 Off-Canvas、Dropdown 是动态插入 DOM 的，FastClick 可能漏绑定或误绑定。更麻烦的是点击穿透风险——弹层关掉后，300ms 后的原生 click 会落到下层元素上。
现代方案够用：
• iOS Safari 10.3+、Chrome 56+、Firefox 64+ 全支持 touch-action: manipulation
• 配合 <meta name="viewport" content="width=device-width, user-scalable=no">，基本覆盖所有场景
• 真要兼容 iOS 9.x 以下，才考虑局部引入 FastClick，且必须限定作用域（比如只包住某个按钮容器）
最易被忽略的一点：表单控件（<input type="text">、<select>）本身不走这套优化，它们的聚焦延迟得靠 inputmode 或 autofocus 单独处理，别指望 touch-action 对它们起效。
