移动端表格行滑动删除失效主因是浏览器默认捕获touch事件用于滚动，需在touchstart阶段对目标tr调用preventDefault()并设touch-action: none，同时隔离事件流、防误触、用transform动画及落点判断确保交互准确。
为什么直接用 touchstart + touchmove 容易失效
移动端表格行滑动删除，很多人一上来就监听 touchstart 和 touchmove 计算位移，结果发现：手指一滑，整页跟着滚动，或者行完全没反应。根本原因是浏览器默认会捕获并处理 touch 事件用于滚动，touchmove 默认不阻止，就抢走了你的滑动逻辑。
关键动作不是“监听”，而是“接管”：
- 在
touchstart阶段立刻调用event.preventDefault()（仅对目标<tr>元素生效，不能写在document上） - 必须设置
touch-action: none到目标行（<tr>或其包裹容器），否则 iOS Safari 会忽略preventDefault - 避免在
<table>或<tbody>上设touch-action: none，否则整个表格失去滚动能力
如何让滑动只作用于单行且不干扰页面滚动
核心是隔离事件流：让滑动手势只绑定到当前行，同时允许手指在非目标区域正常滚动页面。不能靠 CSS overflow: hidden 或 JS 禁用 body 滚动——那会破坏体验。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 给每行
<tr>添加唯一data-id，并在touchstart中记录该行 DOM 引用和初始clientX - 只在
touchmove的 delta X 绝对值 > 10px 时才激活滑动状态（防误触），且仅当Math.abs(deltaX) > Math.abs(deltaY) * 1.5才认为是水平滑动 - 滑动过程中用
transform: translateX()更新行位置，不要改left或margin（重排开销大，动画卡顿） - 手指抬起后，若位移 > 行宽 30%，执行删除；否则回弹——用
transition: transform 0.25s cubic-bezier(0.34, 1.61, 0.78, 0.99)实现自然回弹
transform 滑动后点击事件失效怎么办
滑动后行元素的视觉位置变了，但 DOM 结构没变，导致 click 事件仍触发在原始坐标。用户点“删除按钮”没反应，其实是点到了空白处。
两个可靠解法：
- 把删除按钮放在行内绝对定位的伪元素里：
<tr><td><div class="row-content">...</div><button class="delete-btn">×</button></td></tr>，然后用transform同步移动整个<tr>，按钮随行一起动 - 放弃
click，改用touchend在滑动结束时判断落点是否落在删除区域（比如右 80px 范围），直接触发删除逻辑 - 禁用
pointer-events: none在滑动中临时关闭行内所有交互，防止误点；滑动结束再恢复
iOS Safari 下 transform 动画卡顿的绕过方式
老版本 iOS Safari 对 transform 在 <tr> 上渲染支持差，尤其配合 will-change: transform 反而更卡。别硬刚，换轻量方案：
- 把
<tr>包一层<div class="swipe-wrapper">，对这个 div 做transform，<tr>本身保持静态 - 删掉所有
transition，用requestAnimationFrame手动做逐帧transform更新（更可控，iOS 兼容性好） - 删除操作触发后，用
getBoundingClientRect()获取行位置，再用translateX+opacity: 0+height: 0动画收起，比纯 translate 更稳
真正麻烦的不是滑动本身，而是滑动状态与表格重绘、虚拟滚动、React/Vue 的 key 机制混在一起时，DOM 位置和数据状态错位——这种问题不会报错，只会让你删了 A 行却删掉 B 行的数据。
