手把手教你用JS搞定touchstart&touchmove触摸事件

珍惜时间，勤奋学习！今天给大家带来《手把手教你用JS绑定触摸事件，touchstart & touchmove超简单》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

你的触摸事件没有生效可能有多个原因。1. 元素是否可触摸：确保绑定事件的元素未被遮挡且未设置pointer-events: none；2. event.preventDefault()使用不当：过度使用可能导致后续事件无法触发，只在必要时调用；3. 多点触控处理错误：若需支持多点触控，应遍历touches或changedTouches列表而不仅是取第一个；4. 移动端调试问题：PC端模拟触摸可能存在限制，建议在真机测试；5. 事件冒泡被阻止：父元素可能拦截了事件，导致子元素无法接收；6. 点击延迟问题：移动端默认300ms点击延迟可能影响体验，可通过touch-action: manipulation或FastClick库解决。

在HTML中，你可以使用JavaScript来绑定触摸事件，从而让你的网页或应用能够响应用户的触摸操作。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('触摸取消');
});

为什么我的触摸事件没有生效？

触摸事件失效可能有很多原因，以下是一些常见的排查点：

1. 元素是否可触摸？ 确保你绑定事件的元素确实是可以接收触摸事件的。例如，如果元素被其他元素遮挡，或者设置了pointer-events: none;，那么触摸事件可能无法触发。

   

2. event.preventDefault() 的使用： event.preventDefault() 用于阻止浏览器默认行为。如果你的页面在触摸时需要禁止滚动或缩放，那么你需要调用这个方法。但要注意，过度使用 preventDefault() 可能会导致一些意想不到的问题。比如，在某些情况下，阻止了默认行为后，元素可能无法接收到后续的触摸事件。 所以，只在必要时才使用 preventDefault()。

3. 多点触控： event.touches 和 event.changedTouches 包含了所有触摸点的信息。如果你需要处理多点触控，你需要遍历这些 TouchList 对象，而不是只取第一个触摸点 [0]。

4. 移动端调试： 在PC端调试触摸事件通常需要使用开发者工具的模拟触摸功能。确保你正确设置了模拟触摸，并且浏览器支持你使用的触摸事件。最好还是在真机上进行测试，毕竟模拟环境可能存在差异。

5. 事件冒泡： 触摸事件会沿着DOM树向上冒泡。如果父元素也绑定了触摸事件，并且父元素的事件处理函数阻止了事件冒泡，那么子元素的事件处理函数可能无法执行。

6. 快速响应点击事件: 移动端300ms延迟问题是老生常谈了，可以使用FastClick等库解决，或者直接使用touch-action: manipulation; CSS属性，可以禁用元素的双击缩放行为，从而消除300ms延迟。

如何区分单击、双击和长按？

区分这些手势需要一些逻辑判断，因为触摸事件本身并没有提供直接区分它们的事件。

• 单击： 在 touchend 事件中，记录触摸结束的时间。如果触摸持续时间很短（例如，小于 300 毫秒），则可以认为是单击。

• 双击： 在第一次单击发生后，如果在很短的时间内（例如，300 毫秒内）又发生了第二次单击，则可以认为是双击。

• 长按： 在 touchstart 事件中，设置一个定时器。如果在定时器触发之前，touchend 事件没有发生，则可以认为是长按。

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;
    }
  }
});

TouchEvent的target和currentTarget有什么区别？

target 和 currentTarget 都是 TouchEvent 对象上的属性，但它们指向不同的元素：

• target: 指向触发事件的最原始的元素。 也就是用户直接触摸的那个元素。即使事件冒泡到父元素，target 仍然指向最初触发事件的子元素。

• currentTarget: 指向当前正在处理事件的元素。 换句话说，currentTarget 指向的是你绑定事件监听器的那个元素。

举个例子：

<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>

在这个例子中，如果你点击按钮（child），两个事件监听器都会被触发。在 child 的事件监听器中，target 和 currentTarget 都指向 child。但是在 parent 的事件监听器中，target 指向 child，而 currentTarget 指向 parent。

理解 target 和 currentTarget 的区别对于处理事件委托和事件冒泡非常重要。

如何在移动端实现流畅的拖拽效果？

实现流畅的拖拽效果需要注意以下几点：

1. 避免频繁的DOM操作： 频繁地修改DOM会导致重绘和重排，从而影响性能。尽量减少DOM操作的次数，可以使用transform: translate()来移动元素，而不是修改left和top属性。transform 可以在GPU上执行，性能更好。

2. 使用requestAnimationFrame： requestAnimationFrame 可以确保动画在浏览器的下一次重绘之前执行，从而避免掉帧。

3. 优化触摸事件处理函数： 触摸事件处理函数应该尽可能地简洁高效。避免在事件处理函数中执行耗时的操作，例如大量的计算或网络请求。

4. 考虑惯性滚动： 在拖拽结束后，可以添加惯性滚动效果，让元素继续移动一段时间，直到速度降为零。可以使用一些物理引擎库来实现惯性滚动效果。

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;
  // 可以添加惯性滚动效果
});

此外，可以考虑使用一些现成的拖拽库，例如Draggable.js或者Interact.js，它们提供了更丰富的功能和更好的性能。

终于介绍完啦！小伙伴们，这篇关于《手把手教你用JS搞定touchstart&touchmove触摸事件》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！