监听移动端上下左右滑动事件

最新推荐文章于 2024-08-11 20:48:15 发布

三元灿烂

最新推荐文章于 2024-08-11 20:48:15 发布

阅读量1.5k

点赞数

分类专栏：工作心得文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_39756331/article/details/128819082

版权

工作心得专栏收录该内容

1 篇文章 1 订阅

订阅专栏

// 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, upCallback?, rightCallback?, downCallback?, leftCallback?) => {
  useEffect(() => {
    var startX;
    var startY;
    const handleTouchEvent = (event: TouchEvent) => {
      var spanX = event.changedTouches[0].pageX - startX;
      var 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;
      }
    };
    target.addEventListener("touchstart", handleTouchEvent);
    target.addEventListener("touchend", handleTouchEvent);
    // 是否允许阻止默认行为
    target.addEventListener("touchmove", handleTouchEvent, { passive: false });
    return () => {
      target.removeEventListener("touchstart", handleTouchEvent);
      target.removeEventListener("touchend", handleTouchEvent);
      target.removeEventListener("touchmove", handleTouchEvent);
    };
  });
};

1、attachEvent兼容ie7 8太老了没有必要兼容其实

2、addEventListener第三个参数默认为false,为冒泡，设置为true的时候为捕获

3、设置{passive: false}的时候才能调用preventDefault阻止默认行为，为了及时响应滚动默认为true

4、适应qq和微信内嵌浏览器，需要在touchmove阻止默认行为

阻止默认行为页面就无法滚动了，所以只在左右滑动且事件可以被取消时阻止默认行为

在touchstart阻止默认行为，虽然可以滑动，但是点击事件失效了