HTML中JS怎么绑定触摸事件？touchstart与touchmove应用

// 获取需要绑定事件的元素
const element = document.getElementById('myElement');

// 绑定 touchstart 事件
element.addEventListener('touchstart', function(event) {
  // event.touches 是一个 TouchList 对象，包含所有当前触摸点的 Touch 对象
  // event.changedTouches 是一个 TouchList 对象，包含本次事件中发生改变的 Touch 对象 (例如，刚开始触摸的 Touch 对象)
  const touch = event.changedTouches[0]; // 获取第一个触摸点的信息

  // 获取触摸点的坐标
  const startX = touch.clientX;
  const startY = touch.clientY;

  console.log('触摸开始，坐标：', startX, startY);

  // 阻止默认行为，例如滚动
  event.preventDefault();
});

// 绑定 touchmove 事件
element.addEventListener('touchmove', function(event) {
  const touch = event.changedTouches[0];
  const moveX = touch.clientX;
  const moveY = touch.clientY;

  console.log('触摸移动，坐标：', moveX, moveY);

  // 根据触摸移动的距离，改变元素的位置或者执行其他操作
  // 例如：element.style.left = moveX + 'px';

  event.preventDefault();
});

// 绑定 touchend 事件 (可选)
element.addEventListener('touchend', function(event) {
  console.log('触摸结束');
});

// 绑定 touchcancel 事件 (可选)
element.addEventListener('touchcancel', function(event) {
  console.log('触摸取消');
});

let tapStartTime;
let tapEndTime;
let tapTimeout;
let lastTapTime = 0;
let longTapDelay = 500; // 长按延迟时间
let doubleTapDelay = 300; // 双击间隔时间

element.addEventListener('touchstart', function(event) {
  tapStartTime = Date.now();
  tapTimeout = setTimeout(function() {
    // 长按事件
    console.log('长按');
  }, longTapDelay);
});

element.addEventListener('touchend', function(event) {
  tapEndTime = Date.now();
  clearTimeout(tapTimeout); // 清除长按定时器

  if (tapEndTime - tapStartTime < longTapDelay) {
    // 单击事件
    if (tapEndTime - lastTapTime < doubleTapDelay) {
      // 双击事件
      console.log('双击');
      lastTapTime = 0; // 重置
    } else {
      console.log('单击');
      lastTapTime = tapEndTime;
    }
  }
});

<div id="parent">
  <button id="child">点击我</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('touchstart', function(event) {
    console.log('Parent - target:', event.target.id); // 输出: Parent - target: child
    console.log('Parent - currentTarget:', event.currentTarget.id); // 输出: Parent - currentTarget: parent
  });

  child.addEventListener('touchstart', function(event) {
    console.log('Child - target:', event.target.id); // 输出: Child - target: child
    console.log('Child - currentTarget:', event.currentTarget.id); // 输出: Child - currentTarget: child
  });
</script>

const element = document.getElementById('draggable');
let startX, startY, translateX = 0, translateY = 0;
let isDragging = false;

element.addEventListener('touchstart', function(event) {
  startX = event.touches[0].clientX - translateX;
  startY = event.touches[0].clientY - translateY;
  isDragging = true;
});

element.addEventListener('touchmove', function(event) {
  if (!isDragging) return;

  let currentX = event.touches[0].clientX;
  let currentY = event.touches[0].clientY;

  translateX = currentX - startX;
  translateY = currentY - startY;

  requestAnimationFrame(function() {
    element.style.transform = `translate(${translateX}px, ${translateY}px)`;
  });
});

element.addEventListener('touchend', function(event) {
  isDragging = false;
  // 可以添加惯性滚动效果
});