按钮上监听 swipe 需手动实现：touchstart 记录起始坐标和时间，touchend 时判断位移＞30px 且持续时间＜300ms，避免误触；禁用 Hammer.js 等库以防与原生 click 冲突，50 行内手写更可控。
按钮上怎么监听 swipe 而不是 click
HTML <button> 元素本身不响应 swipe，它只触发 touchstart/touchend 和 click。想在按钮上做左右滑动切换，必须自己算位移——不能靠给 button 加 ontouchmove 就完事。
常见错误是：在 touchmove 里直接判断位移并执行逻辑，结果手指一动就触发，误触率极高；或者没清掉 touchstart 记录的坐标，导致多次滑动叠加判断。
- 只在
touchstart记一次起始clientX和Date.now() -
touchmove中不做判定，只更新当前坐标（可选） - 真正判定放在
touchend：检查Math.abs(endX - startX) > 30且duration - 必须加
{ passive: false }，否则preventDefault()在 Chrome/Edge 里无效
为什么按钮 swipe 经常失效或和 click 冲突
根本原因是 touch 和 click 的生命周期重叠：手指按住按钮 → touchstart → touchend → 紧接着触发 click。如果你在 touchend 里做了 swipe 逻辑，用户松手后又立刻收到 click，就会重复执行。
iOS Safari 还有个隐藏坑：如果按钮有 cursor: pointer 或 :active 样式，系统可能提前吞掉 touchend，导致 swipe 判定失败。
立即学习“前端免费学习笔记（深入）”；
- 在
touchstart里调用e.preventDefault()可阻止 click 触发，但会禁用所有点击反馈（慎用） - 更稳妥的做法：在
touchend判定为 swipe 后，用event.stopPropagation()+event.stopImmediatePropagation()拦截后续 click - 给按钮加
touch-action: manipulation，避免 iOS 把短按识别成 pan - 别用
onclick属性写法，统一用addEventListener('click', ...)方便控制
按钮双指缩放或长按怎么避免干扰单指操作
按钮默认只响应单点触摸，强行加双指逻辑容易让正常点击失灵。比如你在 touchstart 里判断 touches.length === 2 做缩放，但用户只是先按一个手指、再快速补第二根——这时 touchstart 只触发一次，touches.length 是 1，缩放逻辑压根不会启动。
长按也一样：如果只靠 setTimeout，手指轻微移动就会漏判；但移动阈值设太低，又容易把正常点击当成拖拽取消。
- 双指操作必须从
touchstart开始就检查event.touches.length，且全程只处理touches[0]和touches[1]，别碰changedTouches - 长按需配合
touchmove防抖：if (dx > 10 || dy > 10)就clearTimeout(longPressTimer) - 按钮容器建议用
overflow: visible，避免父级overflow: hidden截断多点事件流 - 不要在按钮上同时监听
pinch或rotate——这些手势需要更大操作空间，按钮尺寸太小，用户根本做不出来
要不要给按钮引入 Hammer.js 这类库
没必要。Hammer.js 默认启用所有 recognizer，包括 Drag 和 Tap，而按钮本身就有原生 tap 行为，一接入就容易冲突。你得手动关掉一堆 recognizer，最后代码量比手写还多。
而且 Hammer.js 的 swipe 默认阈值是 80px，按钮区域窄，用户根本滑不出这个距离；它的 pan 又会抢走 click，得额外配 recognizers: [[Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }]]。
- 纯按钮手势，50 行以内手写足够：记录起点、算终点差值、加时间/位移守卫
- 如果页面里还有轮播图、画布、地图等复杂手势区域，再考虑全局引入 @egjs/hammerjs，并单独初始化按钮实例
- 千万别用已归档的
hammer.js，iOS 16+ 对其pointer事件 fallback 有兼容问题 - 真要简化，可用
useSwipe这类轻量 hook（如@vueuse/core提供的），但注意它底层仍是封装 touch 事件，不是魔法
按钮手势最麻烦的从来不是代码量，而是和原生交互节奏的咬合——松手时机、滚动惯性、系统返回手势，这些边界情况手写时反而更容易针对性处理。
