Interaction Touch - 前端知识体系

常见手势

手势	实现方式	应用场景
点击	touchstart/touchend事件	按钮点击、链接跳转
滑动	touchstart→touchmove→touchend	页面滚动、轮播图切换
缩放	双指pinch手势	图片放大、地图缩放
长按	touchstart持续一段时间	上下文菜单、删除操作

触摸优化技巧

防误触

添加适当的触摸延迟和边界检测

视觉反馈

提供即时的视觉反馈

响应速度

确保触摸响应迅速流畅

兼容性

同时支持鼠标和触摸事件

触摸与手势实现方式

原生JavaScript

直接使用触摸事件处理手势

                                // HTML:
<div id="touchArea" class="touch-area">
  在此处进行触摸操作
</div>

// JavaScript:
const touchArea = document.getElementById('touchArea');

let touchStartX = 0;
let touchStartY = 0;
let touchStartTime = 0;

touchArea.addEventListener('touchstart', handleTouchStart);
touchArea.addEventListener('touchmove', handleTouchMove);
touchArea.addEventListener('touchend', handleTouchEnd);

function handleTouchStart(event) {
  const touch = event.changedTouches[0];
  touchStartX = touch.screenX;
  touchStartY = touch.screenY;
  touchStartTime = Date.now();
}

function handleTouchMove(event) {
  event.preventDefault(); // 阻止默认滚动
  
  const touch = event.changedTouches[0];
  const deltaX = touch.screenX - touchStartX;
  const deltaY = touch.screenY - touchStartY;
  
  // 检测滑动方向
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    // 水平滑动
    if (deltaX > 50) {
      console.log('向右滑动');
    } else if (deltaX < -50) {
      console.log('向左滑动');
    }
  } else {
    // 垂直滑动
    if (deltaY > 50) {
      console.log('向下滑动');
    } else if (deltaY < -50) {
      console.log('向上滑动');
    }
  }
}

function handleTouchEnd(event) {
  const touch = event.changedTouches[0];
  const touchEndTime = Date.now();
  const touchDuration = touchEndTime - touchStartTime;
  
  const deltaX = touch.screenX - touchStartX;
  const deltaY = touch.screenY - touchStartY;
  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  
  // 检测长按
  if (touchDuration > 1000 && distance < 10) {
    console.log('长按检测');
  }
  // 检测点击
  else if (touchDuration < 200 && distance < 10) {
    console.log('点击检测');
  }
}
                            

Vue.js实现

封装触摸手势组件，提供声明式API

                                <!-- Vue模板 -->
<template>
  <div 
    class="touch-area"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
    @mouseup="handleMouseUp"
    @mouseleave="handleMouseLeave">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      touchStartX: 0,
      touchStartY: 0,
      touchStartTime: 0,
      message: '触摸或点击此区域'
    }
  },
  methods: {
    handleTouchStart(event) {
      const touch = event.touches[0] || event.changedTouches[0];
      this.touchStartX = touch.screenX;
      this.touchStartY = touch.screenY;
      this.touchStartTime = Date.now();
    },
    handleTouchMove(event) {
      event.preventDefault();
      const touch = event.touches[0] || event.changedTouches[0];
      const deltaX = touch.screenX - this.touchStartX;
      const deltaY = touch.screenY - this.touchStartY;
      
      // 处理滑动手势
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX > 50) {
          this.message = '向右滑动';
        } else if (deltaX < -50) {
          this.message = '向左滑动';
        }
      } else {
        if (deltaY > 50) {
          this.message = '向下滑动';
        } else if (deltaY < -50) {
          this.message = '向上滑动';
        }
      }
    },
    handleTouchEnd(event) {
      const touch = event.changedTouches[0];
      const touchEndTime = Date.now();
      const touchDuration = touchEndTime - this.touchStartTime;
      
      const deltaX = touch.screenX - this.touchStartX;
      const deltaY = touch.screenY - this.touchStartY;
      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
      
      // 检测手势
      if (touchDuration > 1000 && distance < 10) {
        this.message = '长按检测';
      } else if (touchDuration < 200 && distance < 10) {
        this.message = '点击检测';
      }
    },
    // 鼠标事件兼容性处理
    handleMouseDown(event) {
      // 为了兼容桌面端
      this.touchStartX = event.clientX;
      this.touchStartY = event.clientY;
      this.touchStartTime = Date.now();
    }
  }
}
</script>
                            