JS原生移动端判断点击滑动封装

最新推荐文章于 2023-03-08 13:35:04 发布

前端小凯

最新推荐文章于 2023-03-08 13:35:04 发布

阅读量167

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43235503/article/details/127244810

版权

TouchEvent.js：

function TouchEvent() {
  this.tab = function (el) {
    var startX, startY, endX, endY;
    el.ontouchstart = function (e) {
      e = e || window.event;
      startX = e.changedTouches[0].clientX;
      startY = e.changedTouches[0].clientY;
    };
    el.ontouchend = function (e) {
      e = e || window.event;
      endX = e.changedTouches[0].clientX;
      endY = e.changedTouches[0].clientY;
      if (Math.abs(startX - endX) < 10 || Math.abs(startY - endY) < 10) {
        console.log("点击屏幕");
      } else {
        console.log("滑动屏幕");
        if (startX > endX) {
          console.log("向左滑动屏幕");
        }
        if (startX < endX) {
          console.log("向右滑动屏幕");
        }
        if (startY > endY) {
          console.log("向上滑动屏幕");
        }
        if (startY < endX) {
          console.log("向下滑动屏幕");
        }
      }
    };
  };
}