滑动解锁必须用 touchstart/touchmove + mousedown/mousemove 双路径捕获并禁用默认行为，持续校验横向位移阈值与方向，解锁判定需封装独立函数并配合服务端轻量校验，动态生成 canvas 背景与轨迹绘制防录屏，严禁仅靠 dom 操作或 localstorage 信任解锁态。
滑动解锁不是用 input type="range" 实现的
直接套用原生滑块控件会暴露滑块值、缺少拖拽起点校验、无法防止快速拖过或鼠标模拟，安全水位极低。真实场景必须用 touchstart/touchmove + mousedown/mousemove 双路径捕获，并禁用默认行为。
- 必须监听
touchstart和mousedown，记录初始触摸/点击位置（clientX），而非仅依赖change事件 - 拖拽过程中需持续比对横向位移是否达到阈值（如 200px），且要求位移方向为从左到右（
deltaX > 0） - 必须调用
event.preventDefault()阻止滚动或选中干扰，尤其在移动端touchmove中漏掉会导致手势失效 - 释放后要重置状态，避免残留
isDragging = true导致后续点击误触发
解锁成功不能只靠 DOM 操作判断
视觉上滑块到位 ≠ 业务解锁完成。常见错误是仅修改 classList 或显示“解锁成功”，却没同步校验拖拽路径合法性 —— 攻击者可绕过 UI 直接调用 unlock() 函数。
- 解锁判定逻辑必须封装在独立函数（如
validateSwipe()），内部检查：是否已开始拖拽、位移是否达标、是否为单次连续拖拽（非多次短拖拼凑） - 成功回调里不应直接开放敏感操作，而应发起一次轻量级校验请求（如带时间戳和简单签名的
POST /verify-unlock），服务端验证客户端传来的duration和distance是否在合理区间 - 前端本地存储的
localStorage.setItem('unlocked', 'true')必须配合时效性（如 5 分钟过期），且服务端不信任该字段
防截图/录屏泄露的关键不是隐藏元素，而是控制渲染时机
有人试图用 visibility: hidden 或移除 DOM 来“保护”滑块区域，但这类操作对录屏无效，且破坏可访问性。真正有效的做法是延迟渲染 + 动态生成。
- 滑动区域不要写死在 HTML 中，用 JS 动态插入（
document.createElement('div')），并确保插入前无任何可被截图捕获的占位结构 - 初始化时生成一次性 canvas 背景（含轻微噪点和非规则刻度线），不复用图片资源，避免被缓存或提取
- 拖拽过程中实时绘制滑块轨迹（用
canvas.lineTo()），而非 CSS 动画，防止被 DevTools 录制回放还原路径 - 解锁后立即销毁 canvas 并清空容器 innerHTML，不保留任何可被 JS 静态分析出的解锁态标记
pointer-events: none 在滑块区域必须慎用
为防误触给父容器加 pointer-events: none 是常见错误，它会让所有子元素（包括滑块手柄）失焦，导致 touchstart 根本不触发。
- 只对非交互层（如背景遮罩、装饰图形）设
pointer-events: none，滑块轨道和手柄本身必须保持auto - 若需屏蔽其他区域干扰，用
event.stopPropagation()在滑块容器的click处理中拦截，而非 CSS 层面压制 - 在 iOS Safari 上，
pointer-events对touch事件的支持存在兼容差异，实测touchstart可能被静默丢弃，务必真机验证
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
