手机端点击300ms延迟源于ios safari为双击缩放预留的判断窗口，非bootstrap缺陷；通过touch-action: manipulation可禁用双击检测以消除延迟，但需避免误用于需缩放的区域。
为什么手机端点击有 300ms 延迟
这不是 Bootstrap 的 bug，而是早期移动浏览器（尤其是 iOS Safari）为支持双击缩放而预留的判断窗口：浏览器收到第一次 touchstart 后，会等约 300ms 看是否还有第二次点击，再决定触发 click 还是 doubleclick。Bootstrap 的 btn、nav-link 等组件默认依赖原生 click 事件，所以卡顿明显。
用 touch-action: manipulation 快速禁用双击缩放
这是最轻量、兼容性足够好的解法（Chrome 36+、Safari 9.1+、Firefox 65+ 都支持）。它告诉浏览器：“这个区域只做平移和 pinch 缩放，不需要等双击”，从而跳过 300ms 延迟。
实操建议：
- 全局加在
或根容器上：body { touch-action: manipulation; } - 若只需局部生效（比如只对按钮），直接加在对应类上：
.btn, .nav-link { touch-action: manipulation; } - 避免滥用：不要加在可能需要双击缩放的地图、图表容器上，否则
touch-action: none会彻底禁用所有手势 - 注意覆盖关系：如果父元素设了
touch-action: none，子元素设manipulation也无效
Bootstrap 5+ 用户注意 data-bs-toggle 组件的额外延迟
像 dropdown、collapse 这类通过 data-bs-toggle 触发的组件，即使加了 touch-action，首次点击仍可能卡顿——因为它们内部仍监听 click，且初始化时没绑定 touchend。
解决办法是手动提前绑定 touchend 并阻止默认行为：
document.addEventListener('touchstart', function(e) {
if (e.target.matches('[data-bs-toggle]')) {
e.target.click();
}
}, { passive: false });
或者更稳妥地，在初始化后为按钮补监听：
const btn = document.querySelector('[data-bs-toggle="dropdown"]');
btn.addEventListener('touchend', e => {
e.preventDefault();
btn.click();
});
不推荐的“老方案”现在还踩得着坑吗
像 fastclick.js、zepto.tap 这类库，现在基本没必要引入：
-
fastclick在 Chrome 32+ 后已内置等效逻辑，再加载反而增加 JS 执行负担 - 它会劫持所有
touch事件并模拟click，容易和 Bootstrap 的事件委托冲突（比如动态插入的dropdown-item不响应） - 部分安卓 WebView 对
fastclick的needsclick判断失效，导致某些元素完全点不动
真正要小心的是：有些 UI 框架（如旧版 Vue CLI 模板）默认注入了 fastclick，得去 main.js 或 index.html 里删掉相关脚本引用。
移动端触摸优化的核心不是堆方案，而是先确认是否真被 touch-action 覆盖到了——用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “FPS meter”，点一下，看延迟是否消失、有没有意外的手势禁用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
