移动端JavaScript_手势识别实现-js教程-PHP中文网

移动端JavaScript_手势识别实现

夜晨

发布： 2025-11-21 14:15:19

原创

738人浏览过

首先通过监听touchstart、touchmove、touchend事件实现手势识别，具体包括滑动、长按、双击和缩放等操作。记录触摸坐标并计算位移与时间差，结合阈值判断手势类型。例如滑动手势需比较起始与结束位置的偏移量，长按通过定时器检测持续触摸，双击判断两次点击间隔与距离，缩放则依据两指间距离变化。示例代码展示了左右滑动检测逻辑：在touchstart记录起点，touchend时计算水平位移，若水平差大于30且垂直差小于50，根据方向输出swipe left或swipe right。注意事项包括设置passive: false以允许preventDefault调用，避免滥用该方法影响滚动体验，可引入速度因子提升识别精度。对于复杂场景，推荐使用Hammer.js等成熟库以增强兼容性与稳定性。

移动端javascript_手势识别实现

在移动端开发中，手势识别是提升用户体验的重要部分。JavaScript 可以通过监听触摸事件来实现常见的手势操作，比如滑动、长按、双击、缩放等。虽然现代浏览器没有原生提供“手势识别”API，但我们可以基于 touchstart、touchmove、touchend 等基础事件手动实现。

常见手势及其实现原理

以下是几种常用手势的判断逻辑：

滑动手势（swipe）：记录 touchstart 时的坐标，在 touchend 时对比位移和时间，判断是否为快速滑动。
长按手势（long press）：touchstart 后启动定时器，若在指定时间内未触发 touchend，则判定为长按。
双击手势（double tap）：记录两次点击的时间间隔和位置，若都在阈值内则判定为双击。
缩放手势（pinch）：通过两个手指间的距离变化判断放大或缩小。

基础触摸事件使用方法

实现手势的第一步是监听三个核心事件：

element.addEventListener('touchstart', function(e) {
  // 记录初始触摸点
  console.log(e.touches);
});
<p>element.addEventListener('touchmove', function(e) {
// 手指移动中
e.preventDefault(); // 阻止默认滚动行为（谨慎使用）
});</p><p>element.addEventListener('touchend', function(e) {
// 手指离开屏幕
});</p>

登录后复制

示例：实现左右滑动手势

下面是一个简单的左右滑动检测实现：

工资查查移动工资条

大部分的工资还是以打印工资条的形式进行，偶有公司使用邮件发放工资条，而工资条的现代形式应该是移动工资条，以实现信息的备忘、到达、管理、对帐、环保、高效等需求……，用户已经习惯使用手机（或以其它移动方式）实现一切需求，应用的移动化是大势所趋。工资查查就在这样的背景下诞生，北京亦卓科技于2017的开发并推出了微信小程序工资查查。由于对有用户对数据隐私与安全性的考虑，北京亦卓科技在推出了云端应用--工资

查看详情

立即学习“Java免费学习笔记（深入）”；

let startX, startY;
let isSwiping = false;
<p>element.addEventListener('touchstart', function(e) {
const touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
isSwiping = true;
}, { passive: false });</p><p>element.addEventListener('touchmove', function(e) {
if (!isSwiping) return;
e.preventDefault();
}, { passive: false });</p><p>element.addEventListener('touchend', function(e) {
const touch = e.changedTouches[0];
const diffX = touch.clientX - startX;
const diffY = touch.clientY - startY;</p><p>// 判断滑动距离和角度
if (Math.abs(diffX) > 30 && Math.abs(diffY) < 50) {
if (diffX > 0) {
console.log('swipe right');
} else {
console.log('swipe left');
}
}
isSwiping = false;
}, { passive: false });</p>

登录后复制