滑动解锁不能用 dragstart/drop 原生拖拽 api，因其设计目标是跨区域搬运而非用户意图验证，存在行为约束失效、移动端不可靠、坐标获取不准及 ios 兼容性问题；必须监听 touchstart/mousedown 双路径并阻止默认行为，统一获取起点坐标，禁用默认手势，仅用 transform 移动滑块，touchend/mouseup 判定时需结合位移量、容差与最小拖拽时间，失败反馈轻量化，canvas 动态绘制轨迹防录屏，滑块保持 pointer-events:auto，尺寸固定，服务端校验独立且 token 有时效。
滑动解锁不能用 dragstart / drop 原生拖拽 API
HTML5 原生拖拽事件（dragstart、dragover、drop）设计目标是文件/元素跨区域搬运，不是用户意图验证。直接套用会导致：
• 滑块被拖进任意容器就触发 drop，完全绕过“从左到右滑动到底”这个关键行为约束
• dataTransfer 机制在移动端多数浏览器中被禁用或不可靠
• 无法获取精确触摸坐标，clientX 在 drag 事件中不更新或为 0
• iOS Safari 对 dragstart 的触发有延迟或拦截，导致首次滑动失效
必须监听 touchstart + mousedown 双路径并阻止默认行为
真实场景下，用户可能用手指、触控笔或鼠标操作，单一事件监听必然漏判。核心逻辑是捕获起点、持续追踪横向位移、严格校验方向与距离。
-
touchstart中必须调用e.preventDefault()，否则 iOS 会抢走事件并触发页面滚动 -
mousedown同样要e.preventDefault()，防止文本选中干扰 - 起始位置统一取
e.touches?.[0].clientX || e.clientX，避免touches为空时出错 - 容器级设置
touch-action: none，禁用浏览器默认手势（如双指缩放、滚动），否则 touchmove 会被截断 - 滑块移动只更新
transform: translateX(...)，不改left或margin，避免触发重排影响性能
touchend / mouseup 判定要带容差和防抖
仅判断 “滑块 X 位置 ≥ 轨道宽度 − 滑块宽度” 是典型误判。真实手指抬离存在抖动、惯性、精度误差，需结合位移量与释放时机。
- 计算总位移
deltaX = currentX - startX，而非依赖最终 left 值（DOM 属性可能滞后） - 要求
deltaX >= trackWidth - thumbWidth - 12（留 12px 容差，适配不同设备触摸精度） - 增加最小拖拽时间阈值：记录
touchstart时间戳，touchend时检查Date.now() - startTime > 100，过滤误触 - 成功后立即移除所有事件监听器（
removeEventListener），否则多次绑定会导致 unlock() 多次触发 - 失败反馈用
transform: scale(0.95)+ 文字提示，比弹窗更轻量，且不中断操作流
Canvas 动态绘制轨迹才是防录屏的关键
把滑块画在 DOM 里、用 CSS 动画移动，录屏工具能完整还原路径；靠 visibility: hidden 或移除元素，对录屏无效且破坏可访问性。
- 滑动区域不用写死 HTML，用
document.createElement('div')动态插入，初始化前无任何结构残留 - 背景用
canvas绘制一次性噪点+非规则刻度线，不复用图片，避免被缓存提取 - 拖拽中实时调用
ctx.lineTo(x, y)绘制轨迹，不是 CSS 动画或 SVG path 更新 - 解锁成功后立即
canvas.remove()并清空容器innerHTML，不留任何可被 JS 静态分析的解锁态标记 - 滑块手柄本身必须保持
pointer-events: auto，设pointer-events: none会导致 touchstart 根本不触发（尤其 iOS Safari 兼容性差）
滑块宽高建议设为固定像素值（如 width: 80px; height: 40px;），避免因 zoom 或字体缩放导致位移计算偏移；服务端校验必须独立于前端判定，validateSwipe() 返回的 token 须带时效（如 5 分钟）且不可复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
