<p>左滑删除需用 touchstart、touchmove、touchend 三阶段手动计算水平位移：touchstart 记录 startX，touchmove 实时算 deltaX = currentX - startX 并限定 deltaX < -阈值，touchend 判定触发删除。</p>
移动端 touch 事件如何监听左滑动作
左滑删除本质是识别用户手指在列表项上的水平位移，不是靠 CSS 动画或点击触发。必须用 touchstart、touchmove、touchend 三阶段手动计算偏移量，不能依赖 click 或 swipe（原生无 swipe 事件）。
常见错误是只监听 touchend，漏掉 touchmove 中的实时判断，导致滑动不跟手、误触发或卡顿。
- 在
touchstart记录起始clientX - 在
touchmove实时计算deltaX = currentX - startX，并限制只响应向左滑（deltaX ） - 在
touchend判断最终位移是否超过阈值（如-80px），再决定是否展开删除按钮 - 务必调用
event.preventDefault()在touchmove中，否则 iOS 会触发页面滚动
如何让列表项内容层与删除按钮层分层滑动
直接对整个 <li> 应用 transform 会把文字和按钮一起拖走，无法实现「内容左移、删除按钮固定露出」的效果。必须用嵌套结构隔离 DOM 层级。
推荐结构：<li class="swipe-item"><div class="content">...</div><div class="delete-btn">删除</div></li>，仅对 .content 做 transform: translateX()，.delete-btn 设为 position: absolute; right: 0 并设宽高。
立即学习“前端免费学习笔记（深入）”；
-
.swipe-item需设overflow: hidden，否则删除按钮滑出后仍可点击 -
.content要设transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)，避免硬切 - 不要用
left或right动画替代transform，重排代价高，iOS 上易掉帧
如何防止左滑过程中误触内部链接或按钮
手指在滑动时如果划过 <a> 或 <button>，松手瞬间可能触发默认行为（跳转或提交），破坏交互流。这不是 bug，是浏览器默认策略。
- 在
touchstart阶段给.swipe-item加临时 class（如swiping），并在该状态下给子元素设置pointer-events: none - 在
touchend后立即移除该 class，恢复交互 - 更稳妥的做法：对所有可点击子元素加
ontouchstart="event.preventDefault()"，但仅限该列表项内——避免影响全局 - 注意：iOS Safari 对
pointer-events: none在表单控件上兼容性略差，必要时用disabled属性临时禁用<button>
Vue/React 项目中如何复用左滑逻辑
不要在每个组件里重复写 touch 事件绑定和位移计算。封装成可组合函数或自定义 Hook 是关键。
以 Vue 3 Composition API 为例：导出一个 useSwipeDelete 函数，接收 ref 元素和回调 onDelete，内部处理事件绑定/解绑、位移阈值判断、动画状态同步。React 可用 useSwipe 自定义 Hook 返回 { isSwiping, handleTouchStart, ... }。
- 避免在
touchmove中频繁读取offsetWidth或调用getBoundingClientRect()，会强制同步布局 - 删除操作触发后，应由业务层决定是否调用 API、更新列表数据，而不是在滑动逻辑里耦合请求
- 真机调试时注意：Chrome DevTools 的 device emulation 不完全模拟 touch 行为，务必在 iOS/Android 真机验证滑动灵敏度和边界判定
最易被忽略的是 touch-action CSS 属性——没设 touch-action: pan-y 在 .swipe-item 上，iOS 会拦截部分横向 touchmove，导致滑动卡顿或失效。
