useTouchEvent监听移动端滑动事件_监听手机滑动事件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48112768/article/details/132817987

文章介绍了如何使用addEventListener方法监听touchstart,touchend,和touchmove事件，实现触摸方向的判断，并处理QQ和微信内嵌浏览器的兼容性问题，同时提供了滑动距离阈值和默认行为控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 1、attachEvent兼容ie7 8太老了 没有必要兼容其实
// 2、addEventListener第三个参数默认为false,为冒泡，设置为true的时候为捕获
// 3、设置{passive: false}的时候才能调用preventDefault阻止默认行为，为了及时响应滚动默认为true
/**
 * 监听触摸的方向
 * @param target            要绑定监听的目标元素
 * @param isPreventDefault  是否屏蔽掉触摸滑动的默认行为（例如页面的上下滚动，缩放等）
 * @param upCallback        向上滑动的监听回调
 * @param rightCallback     向右滑动的监听回调
 * @param downCallback      向下滑动的监听回调
 * @param leftCallback      向左滑动的监听回调
 */
export const useTouchEvent = (target: any, upCallback?: any, rightCallback?: any, downCallback?: any, leftCallback?: any) => {
  let startX: any;
  let startY: any;
  const handleTouchEvent = (event: TouchEvent) => {
    let spanX = event.changedTouches[0].pageX - startX;
    let spanY = event.changedTouches[0].pageY - startY;
    switch (event.type) {
      case "touchstart":
        startX = event.touches[0].pageX;
        startY = event.touches[0].pageY;
        break;
      case "touchend":
        //设置滑动距离过小不触发事件
        if (Math.abs(spanX) > Math.abs(spanY) && spanX > 30) {
          //向右
          console.log("向右");
          rightCallback?.();
        } else if (Math.abs(spanX) > Math.abs(spanY) && spanX < -30) {
          //向左
          console.log("向左");
          leftCallback?.();
        } else if (Math.abs(spanX) < Math.abs(spanY) && spanY > 30) {
          console.log("向下");
          //向下
          downCallback?.();
        } else if (Math.abs(spanX) < Math.abs(spanY) && spanY < -30) {
          console.log("向上");
          //向上
          upCallback?.();
        }
        break;
      case "touchmove":
        //适应qq和微信内嵌浏览器，需要阻止默认行为
        //阻止默认行为页面就无法滚动了，所以只在左右滑动且事件可以被取消时阻止默认行为
        //在touchStart阻止默认行为，虽然可以滑动，但是点击事件失效了
        Math.abs(spanX) > Math.abs(spanY) && event.cancelable && event.preventDefault();
        break;
    }
  };
  onMounted(() => {
    target?.addEventListener("touchstart", handleTouchEvent);
    target?.addEventListener("touchend", handleTouchEvent);
    // 是否允许阻止默认行为
    target?.addEventListener("touchmove", handleTouchEvent, { passive: false });
  })
  onUnmounted(() => {
    target?.removeEventListener("touchstart", handleTouchEvent);
    target?.removeEventListener("touchend", handleTouchEvent);
    target?.removeEventListener("touchmove", handleTouchEvent);
  })

};