JavaScript移动端开发_触摸事件与手势识别-js教程-PHP中文网

JavaScript移动端开发_触摸事件与手势识别

夢幻星辰

发布： 2025-11-27 16:48:59

原创

748人浏览过

答案是JavaScript触摸事件可实现移动端手势交互，通过touchstart、touchend等事件结合坐标变化与时间判断，可识别滑动、长按、双击等操作，提升移动Web用户体验。

javascript移动端开发_触摸事件与手势识别

在移动端开发中，JavaScript 的触摸事件是实现用户交互的核心。相比 PC 端的鼠标事件，移动端设备依赖手指操作，因此需要使用触摸事件来监听用户的滑动、点击、缩放等行为。掌握触摸事件与手势识别机制，能显著提升移动 Web 应用的体验。

触摸事件基础

移动端浏览器支持一系列原生触摸事件，它们由 TouchEvent 对象触发，常见事件包括：

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

每个事件对象包含关键属性：

touches：当前所有在屏幕上的触点
targetTouches：位于当前 DOM 元素上的触点
changedTouches：本次事件中发生变化的触点

这些属性返回 TouchList 对象，可通过索引访问单个 Touch 对象，获取坐标（pageX/pageY、clientX/clientY）等信息。

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

实现常见手势识别

基于原始触摸事件，可封装出常用手势，比如滑动、长按、双击等。以下是一些基本实现思路：

1. 滑动手势（swipe）

记录 touchstart 时的起始坐标，在 touchend 时计算位移和方向：

STORYD

帮你写出让领导满意的精美文稿

164

查看详情

let startX, startY;
element.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});
element.addEventListener('touchend', e => {
  const endX = e.changedTouches[0].clientX;
  const endY = e.changedTouches[0].clientY;
  const deltaX = endX - startX;
  const deltaY = endY - startY;
<p>if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
if (deltaX > 0) console.log('向右滑');
else console.log('向左滑');
}
});</p>

登录后复制

2. 长按（long press）

使用 setTimeout 在 touchstart 后延迟判断，touchend 或 touchmove 触发时清除定时器：

let pressTimer;
element.addEventListener('touchstart', () => {
  pressTimer = setTimeout(() => {
    console.log('长按触发');
  }, 800);
});
element.addEventListener('touchend', () => {
  clearTimeout(pressTimer);
});
element.addEventListener('touchmove', () => {
  clearTimeout(pressTimer);
});

登录后复制

3. 双击（double tap）

记录上一次点击时间，判断两次点击间隔是否小于阈值：

let lastTap = 0;
element.addEventListener('touchend', e => {
  const now = Date.now();
  if (now - lastTap < 300) {
    console.log('双击');
  }
  lastTap = now;
});

登录后复制