js怎样检测手势滑动方向 js手势滑动检测的5个关键点-js教程-PHP中文网

js怎样检测手势滑动方向 js手势滑动检测的5个关键点

尼克

发布： 2025-06-30 17:55:01

原创

729人浏览过

js检测手势滑动方向的方法是监听touchstart、touchmove、touchend事件并计算坐标差，具体步骤为：1. 监听触摸事件，记录touchstart时的起始坐标；2. 在touchend时获取结束坐标并调用处理函数；3. 计算deltax和deltay，通过正负值判断滑动方向；4. 设置阈值避免误判；5. 优化性能时减少touchmove计算量或使用requestanimationframe；6. 多点触控可通过遍历touches数组处理。应用场景包括轮播图切换、页面滑动、下拉刷新等。在react中可结合useref、useeffect实现，也可使用react-use-gesture库。除此之外，还可使用pointer events api或第三方库如hammer.js实现手势检测。

js怎样检测手势滑动方向 js手势滑动检测的5个关键点

js检测手势滑动方向，关键在于监听 touchstart, touchmove, touchend 事件，并计算起始位置和结束位置的坐标差，以此判断滑动方向。这听起来简单，但实际应用中有很多需要注意的细节。

解决方案

监听触摸事件： 首先，你需要监听 touchstart，touchmove，和 touchend 这三个事件。 touchstart 用于记录手指触摸屏幕的起始位置，touchmove 用于实时追踪手指移动的位置，touchend 用于记录手指离开屏幕时的位置。

let startX, startY;

document.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
}, false);

document.addEventListener('touchmove', (e) => {
    // 可以选择性地在这里做一些实时反馈，比如跟随着手指移动的动画
}, false);

document.addEventListener('touchend', (e) => {
    const endX = e.changedTouches[0].clientX;
    const endY = e.changedTouches[0].clientY;
    handleSwipe(startX, startY, endX, endY);
}, false);

登录后复制

记录起始和结束位置： 在 touchstart 事件中，使用 e.touches[0].clientX 和 e.touches[0].clientY 来获取触摸点的 X 和 Y 坐标，并保存为起始位置。在 touchend 事件中，使用 e.changedTouches[0].clientX 和 e.changedTouches[0].clientY 获取触摸结束时的 X 和 Y 坐标。注意 touches 和 changedTouches 的区别，touches 包含当前屏幕上所有触摸点的信息，而 changedTouches 只包含触发 touchend 事件的触摸点的信息。
计算坐标差： 在 touchend 事件的处理函数中，计算起始位置和结束位置的 X 坐标差 (deltaX) 和 Y 坐标差 (deltaY)。
```
function handleSwipe(startX, startY, endX, endY) {
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    // 接下来判断滑动方向
}
```
登录后复制

判断滑动方向： 根据 deltaX 和 deltaY 的正负值来判断滑动方向。例如，如果 deltaX 大于 0，则表示向右滑动；如果 deltaX 小于 0，则表示向左滑动。同理，可以判断向上或向下滑动。

function handleSwipe(startX, startY, endX, endY) {
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        // 水平滑动
        if (deltaX > 0) {
            console.log("向右滑动");
        } else {
            console.log("向左滑动");
        }
    } else {
        // 垂直滑动
        if (deltaY > 0) {
            console.log("向下滑动");
        } else {
            console.log("向上滑动");
        }
    }
}

登录后复制

设置灵敏度阈值： 为了避免误判，可以设置一个灵敏度阈值。只有当滑动距离超过这个阈值时，才认为发生了滑动。这可以避免一些小的、无意的触摸被识别为滑动。

const threshold = 50; // 阈值，单位像素

function handleSwipe(startX, startY, endX, endY) {
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > threshold) {
        // 水平滑动
        if (deltaX > 0) {
            console.log("向右滑动");
        } else {
            console.log("向左滑动");
        }
    } else if (Math.abs(deltaY) > threshold) {
        // 垂直滑动
        if (deltaY > 0) {
            console.log("向下滑动");
        } else {
            console.log("向上滑动");
        }
    }
}

登录后复制

如何优化手势滑动检测的性能？

优化手势滑动检测的性能，可以从几个方面入手。首先，减少 touchmove 事件处理函数的计算量。 touchmove 事件会频繁触发，如果在这个函数中进行复杂的计算，会影响性能。可以考虑只在必要的时候才进行计算，例如，每隔一段时间或者当滑动距离超过一定值时。另外，可以使用 requestAnimationFrame 来优化动画效果。 requestAnimationFrame 会在浏览器下一次重绘之前执行指定的函数，这可以保证动画的流畅性。

如何处理多点触控的情况？

处理多点触控的情况稍微复杂一些。你需要遍历 e.touches 数组，获取每个触摸点的信息。然后，可以根据你的需求来处理这些触摸点。例如，你可以计算两个触摸点之间的距离，来判断是否发生了捏合缩放。或者，你可以忽略多点触控，只处理第一个触摸点。

在移动端开发中，手势滑动检测有哪些常见的应用场景？

手势滑动检测在移动端开发中有很多常见的应用场景。例如，可以用来实现轮播图的切换，或者实现页面的左右滑动切换。还可以用来实现下拉刷新，或者上拉加载更多。甚至可以用来实现一些复杂的手势操作，例如画板应用中的绘画功能。总而言之，手势滑动检测可以为移动应用带来更加自然、流畅的用户体验。

如何在 React 中使用手势滑动检测？

在 React 中使用手势滑动检测，可以使用 react-use-gesture 这样的库，它封装了底层的手势事件处理，提供了更高级的 API。也可以自己实现，使用 useRef 来保存起始坐标，useEffect 来监听事件，并使用 useCallback 来优化事件处理函数。

import React, { useRef, useEffect, useCallback } from 'react';

function SwipeComponent() {
  const startRef = useRef({ x: 0, y: 0 });

  const handleTouchStart = useCallback((e) => {
    startRef.current = {
      x: e.touches[0].clientX,
      y: e.touches[0].clientY,
    };
  }, []);

  const handleTouchEnd = useCallback((e) => {
    const endX = e.changedTouches[0].clientX;
    const endY = e.changedTouches[0].clientY;
    const deltaX = endX - startRef.current.x;
    const deltaY = endY - startRef.current.y;

    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
      if (deltaX > 0) {
        console.log("向右滑动");
      } else {
        console.log("向左滑动");
      }
    } else if (Math.abs(deltaY) > 50) {
      if (deltaY > 0) {
        console.log("向下滑动");
      } else {
        console.log("向上滑动");
      }
    }
  }, []);

  useEffect(() => {
    document.addEventListener('touchstart', handleTouchStart);
    document.addEventListener('touchend', handleTouchEnd);

    return () => {
      document.removeEventListener('touchstart', handleTouchStart);
      document.removeEventListener('touchend', handleTouchEnd);
    };
  }, [handleTouchStart, handleTouchEnd]);

  return (

      滑动我！

  );
}

export default SwipeComponent;

登录后复制

除了 touch 事件，还有其他方法可以检测手势滑动吗？

除了 touch 事件，还可以使用 Pointer Events API 来检测手势滑动。 Pointer Events API 统一了鼠标、触摸和触控笔等输入设备，提供了更加灵活和强大的事件处理能力。另外，一些现代 JavaScript 框架和库也提供了手势识别的功能，例如 Hammer.js。这些框架和库封装了底层的手势事件处理，提供了更高级的 API，可以更加方便地实现手势滑动检测。

以上就是js怎样检测手势滑动方向 js手势滑动检测的5个关键点的详细内容，更多请关注php中文网其它相关文章！