在触摸屏设备上获取滑动方向与距离,需监听touchstart和touchend事件,记录首个触点的起始与结束坐标,用Δx/Δy绝对值比较及阈值(如10px)判断方向,慎用preventdefault以避免干扰默认滚动。

在触摸屏设备上获取滑动方向与距离,核心是监听 touchstart 和 touchend 事件,记录起始与结束时的触摸坐标,再通过坐标差值计算方向和位移量。关键在于避免误触发、处理多点触控、区分点击与滑动,并适配不同屏幕方向。
记录起点与终点坐标
在 touchstart 中保存第一个触点(touches[0])的 clientX 和 clientY;在 touchend 中读取同一触点的最终坐标。注意使用 changedTouches[0] 获取本次离开的触点,而非 touches[0](可能已被其他手指覆盖):
- 只取第一个触点,忽略多指操作,防止逻辑混乱
- 用
event.preventDefault()在touchmove中慎用——仅当明确要禁用默认滚动时才调用,否则影响页面正常滑动
判断滑动方向(水平 or 垂直)
比较横向位移(Δx)与纵向位移(Δy)的绝对值大小,设定一个最小阈值(如 10px)过滤微小抖动:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 若
Math.abs(Δx) > Math.abs(Δy)且Math.abs(Δx) > 10→ 水平滑动:Δx > 0 为右滑,Δx - 若
Math.abs(Δy) > Math.abs(Δx)且Math.abs(Δy) > 10→ 垂直滑动:Δy > 0 为下滑,Δy - 不满足任一条件则视为点击或无效操作
计算滑动距离与角度(可选进阶)
欧氏距离 distance = Math.sqrt(Δx² + Δy²) 给出总滑动长度;若需更精细方向(如“东北”“西南”),可用 Math.atan2(Δy, Δx) 得到弧度角,再转为 0–360° 方向角:
- 实际项目中,多数场景只需四方向(上/下/左/右),不必引入角度计算
- 注意:手机横屏时,
clientX/Y仍基于视口坐标系,无需手动旋转转换
防误触与体验优化
用户快速点按也可能产生几像素偏移,导致误判为滑动。建议增加时间与位移双重约束:
- 记录
touchstart时间戳,若touchend - startTimestamp ,直接忽略(太快不是有意滑动) - 结合
touchmove监听:一旦发生明显移动(如 Δx 或 Δy 超过 5px),就标记为“已滑动”,后续touchend才触发方向逻辑 - 避免在
touchstart就绑定touchmove,而应在检测到有效移动后动态添加,减少无谓监听
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










