bootstrap 5 默认不处理 touchstart 等原生触摸事件，彻底移除 jquery 依赖及触摸事件模拟，仅响应 click、pointerdown 等标准指针事件，移动端需自行补全触摸逻辑并合理设置 touch-action。
Bootstrap 5 默认不处理 touchstart 等原生触摸事件
Bootstrap 5 彻底移除了对 jQuery 的依赖，也一并放弃了内置的触摸事件模拟（比如旧版的 tap、swipe）。它只响应标准的鼠标/指针事件（click、pointerdown），而不会主动监听或转发 touchstart、touchend。这意味着：你在手机上点一个 btn-primary，只要没禁用 pointer-events，它照样触发 click——但这是浏览器自动将单次 touchend 映射为 click 的结果，不是 Bootstrap 在“支持”触摸事件。
常见错误现象：
- 给按钮绑了
touchstart监听器，但在 iOS Safari 上第一次点击无响应（300ms 延迟或被默认行为阻断） - 试图用
data-bs-toggle="modal"配合自定义触摸手势（如长按呼出菜单），发现完全不触发 - 在
overflow: auto区域内滑动时，dropdown或tooltip意外关闭（因缺少对touchmove的抑制）
移动端真需要触摸交互？得自己补 touch 事件逻辑
如果你要实现滑动轮播、长按编辑、下拉刷新这类操作，Bootstrap 提供的组件（如 carousel）本身不暴露触摸钩子，也不 emit touch 相关事件。你必须绕过它，直接操作 DOM 或封装自己的手势识别。
实操建议：
- 用
addEventListener('touchstart', ...)+preventDefault()控制默认行为（尤其在scroll容器里） - 避免在
touchstart中直接调用bootstrap.Modal.getInstance(...).show()，优先等touchend确认意图，防止误触 - 对
dropdown类组件，需手动监听touchend并调用show()/hide()，因为它的data-bs-toggle只响应click - 使用
PointerEvent替代TouchEvent更稳妥（Bootstrap 5 内部已全面迁移），兼容笔、触控、鼠标
示例：让下拉菜单支持轻点展开（非 hover）
const dropdownToggle = document.querySelector('[data-bs-toggle="dropdown"]');
dropdownToggle.addEventListener('touchend', e => {
e.preventDefault();
bootstrap.Dropdown.getInstance(dropdownToggle)?.toggle();
});
click 在移动端的兼容性陷阱
虽然 Bootstrap 依赖 click，但移动端的 click 有延迟（iOS Safari 约 300ms）、可能被取消（快速双击缩放）、或在某些 WebView 中被屏蔽。这不是 Bootstrap 的 bug，而是浏览器策略。
关键参数与影响：
-
<meta name="viewport" content="width=device-width, initial-scale=1">缺失 →click延迟不可消除 -
cursor: pointer或touch-action: manipulation能让部分浏览器提前触发click（跳过 300ms） - 给元素设
ontouchstart="void(0)"是旧式 hack，现代已不推荐；改用touch-action: manipulation更干净 - 在 iframe 或第三方 WebView（如微信内嵌）中，
click可能完全失效，必须 fallback 到pointerdown
第三方库联动时的触摸冲突
当你引入 hammer.js、interact.js 或 swiper 时，它们会接管 touch 事件流，和 Bootstrap 的 click-驱动组件（如 collapse、tab）容易打架。
典型表现：
- 轮播图（Swiper）区域内的
btn-close点不响（touchstart被 Swiper 捕获并阻止冒泡） - 拖拽排序列表时，
dropdown自动收起（因touchmove触发了 Bootstrap 的外部点击关闭逻辑） - 解决方案核心是事件捕获顺序和
stopPropagation()的位置控制
建议做法：
- 在自定义手势开始时，用
bootstrap.Collapse.getInstance(el)?.hide()主动收起干扰组件 - 给 Swiper 容器加
data-bs-skip="true"，并在 Bootstrap 初始化前过滤掉这些元素 - 避免在同一个元素上混用
data-bs-*和swiper的绑定，拆分为父子容器更可控
实际项目里最常被忽略的，是 touch-action CSS 属性的显式设置——它不光影响滚动性能，还决定浏览器是否把触摸事件交给 JS 处理。没配好，手势就卡顿或失灵。
