js手机端触摸事件

在JavaScript中，手机端的触摸事件主要包括以下几种：

基础概念

touchstart：当手指触摸屏幕时触发。
touchmove：当手指在屏幕上滑动时连续触发。
touchend：当手指离开屏幕时触发。
touchcancel：当系统停止跟踪触摸时触发，例如手指移动过快导致系统认为这不是一个有效的触摸。

类型

单点触摸：一次只有一个触摸点。
多点触摸：同时有多个触摸点，常用于实现缩放、旋转等功能。

应用场景

滑动导航：通过touchstart和touchmove实现页面或图片的滑动效果。
缩放功能：通过多点触摸实现图片或地图的缩放。
游戏控制：利用触摸事件实现游戏中的角色移动、攻击等操作。

示例代码

以下是一个简单的示例，展示如何使用触摸事件实现一个可拖动的元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Event Example</title>
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 100px;
  }
</style>
</head>
<body>
<div id="draggable"></div>

<script>
  const draggable = document.getElementById('draggable');
  let touchStartX, touchStartY, elementStartX, elementStartY;

  draggable.addEventListener('touchstart', (e) => {
    e.preventDefault(); // 防止默认行为，如滚动
    const touch = e.touches[0];
    touchStartX = touch.clientX;
    touchStartY = touch.clientY;
    elementStartX = draggable.offsetLeft;
    elementStartY = draggable.offsetTop;
  });

  draggable.addEventListener('touchmove', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const deltaX = touch.clientX - touchStartX;
    const deltaY = touch.clientY - touchStartY;
    draggable.style.left = `${elementStartX + deltaX}px`;
    draggable.style.top = `${elementStartY + deltaY}px`;
  });

  draggable.addEventListener('touchend', (e) => {
    e.preventDefault();
    // 可以在这里处理触摸结束后的逻辑
  });
</script>
</body>
</html>