移动交互：Touch事件与手势识别实现-js教程-PHP中文网

移动交互：Touch事件与手势识别实现

夢幻星辰

发布： 2025-11-21 08:15:05

原创

534人浏览过

答案是掌握Touch事件与手势识别对移动端开发至关重要。通过touchstart、touchmove、touchend和touchcancel事件获取触点信息，结合坐标与时间判断可实现滑动、长按、缩放等手势；例如滑动手势需记录起始位置与时间，在touchend时计算位移与耗时，满足条件则判定方向；长按通过setTimeout检测持续触摸；双指缩放需计算多点间距离变化并阻止默认行为；为提升效率，推荐使用Hammer.js等库或框架集成方案，在理解原生机制基础上借助工具实现稳定交互。

移动交互：touch事件与手势识别实现

在移动设备上，用户通过触摸屏幕与应用进行交互，因此理解和正确处理 Touch 事件与手势识别是开发高质量移动端应用的关键。浏览器原生提供了 Touch API，结合逻辑判断可以实现常见的手势操作，如滑动、双击、长按、缩放等。

Touch 事件基础

现代移动浏览器支持以下核心 Touch 事件：

touchstart：手指刚接触屏幕时触发
touchmove：手指在屏幕上移动时持续触发
touchend：手指离开屏幕时触发
touchcancel：系统中断触摸（如来电）时触发

每个事件对象包含一个 TouchEvent.touches 属性，返回当前所有正在接触屏幕的手指列表（Touch 对象数组），常用属性包括 clientX/clientY 获取触点坐标。

实现基本手势识别

基于 Touch 事件的组合和数据计算，可识别常见手势。关键在于记录起始状态，并在 touchend 或 touchmove 中判断变化趋势。

滑动手势（swipe） 实现思路：

在 touchstart 记录初始坐标（startX, startY）和时间
在 touchend 获取结束坐标（endX, endY）
计算位移差，若水平位移足够大且垂直位移较小，则判定为左右滑动

示例代码片段：

let startX, startY, startTime;
<p>element.addEventListener('touchstart', (e) => {
const firstTouch = e.touches[0];
startX = firstTouch.clientX;
startY = firstTouch.clientY;
startTime = Date.now();
});</p><p>element.addEventListener('touchend', (e) => {
const endX = e.changedTouches[0].clientX;
const endY = e.changedTouches[0].clientY;
const deltaX = endX - startX;
const deltaY = endY - startY;
const deltaTime = Date.now() - startTime;</p><p>// 判断是否为快速滑动
if (deltaTime < 500 && Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
if (deltaX > 0) {
console.log('swipe right');
} else {
console.log('swipe left');
}
}
});</p>

登录后复制

长按手势（long press） 可通过 setTimeout 实现：