touch事件的简单封装

最新推荐文章于 2022-06-07 14:22:26 发布

freadChen

最新推荐文章于 2022-06-07 14:22:26 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：博客 javascript touch

本文链接：https://blog.youkuaiyun.com/qq_32550037/article/details/78044349

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用ES6特性封装的Touch事件处理类，该类能够精确地监控并区分用户的点击、长按及滑动等触屏操作，并提供了详细的实现代码。

在Q群有很多人在问touch事件怎么去监控它的左右滑动，于是乎有时间我就萌生了封装touch对象的想法。

利用ES6的新特性class写的touch类，下面来详情介绍一下我的思路：利用ES6的新特性class写的touch类，下面来详情介绍一下我的思路：

下面这个object存放的是用于判断事件的各种参数，它在touchstart、touchmove、touchend的过程中绑定相关数据达到最终的判断结果，具体将过程在后面介绍。

this.obj = {
  x1: 0,  // 初始横坐标
  y1: 0,  // 初始纵坐标
  timeStart: 0, // 初始时间戳
  x2: 0,  // 结束横坐标
  y2: 0,  // 结束纵坐标
  timeEnd: 0, // 结束时间戳
  x: 50,  // 横坐标的容错值
  y: 50,  // 纵坐标的容错值
  interval: 200,  // 有效时间间隔
  sX: 0, // 存放横坐标差
  sY: 0, // 存放纵坐标差
  sTime: 0,  // 存放touch事件的时间长度
  getXandYandTime: function () { // 获取坐标差，和touch时间的长度
    this.sX = this.x2 - this.x1
    this.sY = this.y2 - this.y1
    this.sTime = this.timeEnd - this.timeStart
  },
  len: 0 // 记录多少个触摸点
}

下面的object是一个事件委托的列表，每一种事件都用一个列表来存放，避免多次绑定造成的覆盖影响。

this.event = {
  touch: [],
  longTouch: [],
  leftMove: [],
  rightMove: [],
  topMove: [],
  bottomMove: []
}

下面是核心代码，touch事件的判断逻辑。touchstart记录初始坐标值，touchmove跟踪最终坐标点，在touchend或touchcancel根据sX、sY、sTime等参数来判断是什么事件。

init() {
  this.elm.addEventListener('touchstart', event => {
    // 保证是单指点击事件
    this.obj.len = event.touches.length
    if (this.obj.len === 1) {
      this.obj.x1 = this.obj.x2 = event.touches[0].pageX
      this.obj.y1 = this.obj.y2 = event.touches[0].pageY
      this.obj.timeStart = new Date().getTime()
    }
  })
  this.elm.addEventListener('touchmove', (event) => {
    if (this.obj.len === 1){
      this.obj.x2 = event.touches[0].pageX
      this.obj.y2 = event.touches[0].pageY
    }
  })
  var touchend = (event) => {
    if (this.obj.len != 1) {
      return
    }
    let str = ''
    this.obj.timeEnd = new Date().getTime()
    this.obj.getXandYandTime()
    // 判断是否为点击事件
    if (Math.abs(this.obj.sX) < this.obj.x
      && Math.abs(this.obj.sY) < this.obj.y){
      if (this.obj.sTime < this.obj.interval) {
        // console.log('点击事件')
        str = 'touch'
      }
      else {
        // console.log('长按事件')
        str = 'longTouch'
      }
    }
    else {
      if (Math.abs(this.obj.sX) > Math.abs(this.obj.sY)) {
        if (this.obj.sX > 0) {
          // console.log('右滑事件')
          str = 'rightMove'
        } else {
          // console.log('左滑事件')
          str = 'leftMove'
        }
      }
      else {
        if (this.obj.sY > 0) {
          // console.log('下滑事件')
          str = 'bottomMove'
        } else {
          // console.log('上滑事件')
          str = 'topMove'
        }
      }
    }
    this.mapEvent(str, event)
  }
  this.elm.addEventListener('touchend', (event) => {
    touchend.call(this, event)
  })
  this.elm.addEventListener('touchcancel', (event) => {
    touchend.call(this, event)
  })

}

上面介绍了自定义touch事件的判断，接下来看看事件的绑定和解绑，从下面三个方法可以看出来，on将要绑定的事件委托压入数组，off将为委托清空，执行的时候讲列表的函数都执行一次，默认传入event参数。

// 绑定自定义事件
on(str, fn) {
  this.event[str].push(fn)
  return this
}
// 解绑自定义事件
off(str) {
  this.event[str] = []
  return this
}
// 执行自定义事件
mapEvent(str, event) {
  for(let val of this.event[str]){
    val(event)
  }
}

最后附上全部的代码：

class touch {
  constructor(elm) {
    this.elm = elm
    this.obj = {
      x1: 0,  // 初始横坐标
      y1: 0,  // 初始纵坐标
      timeStart: 0, // 初始时间戳
      x2: 0,  // 结束横坐标
      y2: 0,  // 结束纵坐标
      timeEnd: 0, // 结束时间戳
      x: 50,  // 横坐标的容错值
      y: 50,  // 纵坐标的容错值
      interval: 200,  // 有效时间间隔
      sX: 0, // 存放横坐标差
      sY: 0, // 存放纵坐标差
      sTime: 0,  // 存放touch事件的时间长度
      getXandYandTime: function () {
        console.log(this)
        this.sX = this.x2 - this.x1
        this.sY = this.y2 - this.y1
        this.sTime = this.timeEnd - this.timeStart
      },
      len: 0 // 记录多少个触摸点
    }
    // 事件代理列表
    this.event = {
      touch: [],
      longTouch: [],
      leftMove: [],
      rightMove: [],
      topMove: [],
      bottomMove: []
    }
    this.init()
  }
  // 初始化绑定touchstart、touchmove、touchend事件，用于判断用户执行的操作
  init() {
    this.elm.addEventListener('touchstart', event => {
      // 保证是单指点击事件
      this.obj.len = event.touches.length
      if (this.obj.len === 1) {
        this.obj.x1 = this.obj.x2 = event.touches[0].pageX
        this.obj.y1 = this.obj.y2 = event.touches[0].pageY
        this.obj.timeStart = new Date().getTime()
      }
    })
    this.elm.addEventListener('touchmove', (event) => {
      if (this.obj.len === 1){
        this.obj.x2 = event.touches[0].pageX
        this.obj.y2 = event.touches[0].pageY
      }
    })
    var touchend = (event) => {
      if (this.obj.len != 1) {
        return
      }
      let str = ''
      this.obj.timeEnd = new Date().getTime()
      this.obj.getXandYandTime()
      // 判断是否为点击事件
      if (Math.abs(this.obj.sX) < this.obj.x
        && Math.abs(this.obj.sY) < this.obj.y){
        if (this.obj.sTime < this.obj.interval) {
          // console.log('点击事件')
          str = 'touch'
        }
        else {
          // console.log('长按事件')
          str = 'longTouch'
        }
      }
      else {
        if (Math.abs(this.obj.sX) > Math.abs(this.obj.sY)) {
          if (this.obj.sX > 0) {
            // console.log('右滑事件')
            str = 'rightMove'
          } else {
            // console.log('左滑事件')
            str = 'leftMove'
          }
        }
        else {
          if (this.obj.sY > 0) {
            // console.log('下滑事件')
            str = 'bottomMove'
          } else {
            // console.log('上滑事件')
            str = 'topMove'
          }
        }
      }
      this.mapEvent(str, event)
    }
    this.elm.addEventListener('touchend', (event) => {
      touchend.call(this, event)
    })
    this.elm.addEventListener('touchcancel', (event) => {
      touchend.call(this, event)
    })

  }
  // 绑定自定义事件
  on(str, fn) {
    this.event[str].push(fn)
    return this
  }
  // 解绑自定义事件
  off(str) {
    this.event[str] = []
    return this
  }
  // 执行自定义事件
  mapEvent(str, event) {
    for(let val of this.event[str]){
      val(event)
    }
  }
}

调用方式：

var t = new touch(document.getElementsByClassName('test')[0]).on('touch', event => {
  console.log('touch')
}).on('leftMove', event => {
  console.log('leftMove')
}).off('touch')