JS给指定元素挂载滑动事件

给指定元素挂载划动事件

config
bind	指定元素dom
dire_h	指定判断方向 true-左右，false-上下
safeDisX	至少划动多少px触发control状态改变，XY至少设置一个
safeDisY	至少划动多少px触发control状态改变，XY至少设置一个
move	滑动过程中的回调
callback	滑动结束的回调

    var SwiperMaker = function(o) {
      var that = this;
      this.config = o;
      this.control = false;
      this.sPos = {};
      this.mPos = {};
      this.dire;
      if (!this.config.bind) {
        return;
      }
      this.config.bind.addEventListener('touchstart', function(e) {
        return that.start(e);
      });
      this.config.bind.addEventListener('touchmove', function(e) {
        return that.move(e);
      });
      this.config.bind.addEventListener('touchend', function(e) {
        return that.end(e);
      });
    };
    SwiperMaker.prototype.start = function(e) {
      var point = e.touches ? e.touches[0] : e;
      this.sPos.x = point.screenX;
      this.sPos.y = point.screenY;
    };
    SwiperMaker.prototype.move = function(e) {
      var point = e.touches ? e.touches[0] : e;
      this.mPos.x = point.screenX;
      this.mPos.y = point.screenY;
      if (
        this.control === false &&
        (this.config.safeDisX
          ? Math.abs(this.mPos.x - this.sPos.x) < this.config.safeDisX
          : true) &&
        (this.config.safeDisY
          ? Math.abs(this.mPos.y - this.sPos.y) < this.config.safeDisY
          : true)
      ) {
        return;
      }
      this.control = true; // 正在触发滑动
      this.config.dire_h &&
        (!this.control
          ? (this.dire = null)
          : this.mPos.x > this.sPos.x
          ? (this.dire = 'R')
          : (this.dire = 'L'));
      this.config.dire_h ||
        (!this.control
          ? (this.dire = null)
          : this.mPos.y > this.sPos.y
          ? (this.dire = 'D')
          : (this.dire = 'U'));
      this.config.move(this);
    };
    SwiperMaker.prototype.end = function(e) {
      this.config.dire_h &&
        (!this.control
          ? (this.dire = null)
          : this.mPos.x > this.sPos.x
          ? (this.dire = 'R')
          : (this.dire = 'L'));
      this.config.dire_h ||
        (!this.control
          ? (this.dire = null)
          : this.mPos.y > this.sPos.y
          ? (this.dire = 'D')
          : (this.dire = 'U'));
      this.config.callback(this);
      setTimeout(() => {
        this.control = false;
      });
    };
    window.SwiperMaker = SwiperMaker;

使用示例

let player = document.getElementById('player');
            if (!player) {
              return;
            }
            let showFloat = document.createElement('div');
            showFloat.className = 'show-float flex-center';
            document.getElementById('hover-shadow').appendChild(showFloat);
            let _this = this;
            var a = new SwiperMaker({
              bind: player, // 绑定划动的DOM对象
              dire_h: true, //true 判断左右， false 判断上下
              safeDisX: 30, //左右判断距离
              move: function(o) {
                let screenW = document.body.clientWidth; // 屏幕宽度
                let { mPos, sPos } = o;
                let dis = Math.abs(mPos.x - sPos.x); // 移动距离
                let rate = Math.min(dis, screenW) / screenW; // 移动比例
                let diffDuration = timeRange * rate; // 移动的时间
                let currentTime = _this.player.currentTime(); // 当前播放时间
                let newTime =
                  o.dire == 'R'
                    ? currentTime + diffDuration
                    : currentTime - diffDuration; // 新的播放时间
                let videoDuration = _this.player.duration();
                newTime = Math.max(0, Math.min(newTime, videoDuration));
                showFloat.innerText = `${_this.timestampToHour(
                  newTime * 1000
                )}/${_this.timestampToHour(videoDuration * 1000)}`;
                o.newTime = newTime;
                showFloat.style.display = 'block';
              },
              callback: function(o) {
                if (!o.newTime || !o.control) {
                  return;
                }
                _this.player.currentTime(o.newTime);
                showFloat.style.display = 'none';
                delete o.newTime;
              }
            });