移动端手势库设计与实践

摘要：前言本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践。实现即手指滑动事件，应用场景如轮播图左右滑动切换，整屏页面滑动翻页等，算是移动端最常见的手势之一了。

本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践。

主要就是利用移动端的以下3个触摸事件，来模拟和实现自定义的手势操作

touchstart：手指触摸到屏幕的一瞬间触发

touchmove：手指在屏幕上移动时触发

touchend：手指从屏幕上离开时触发

touch事件触发时，有3组数据可以获得触摸信息，可能大家会对这几组数据有些混淆，我根据自己的理解来尽量用通俗的语言给大家解释清楚

touches：整个屏幕上所有的触摸点集合

targetTouches：当前DOM元素上的所有触摸点集合

changedTouches：相对上一次触摸点发生变化的集合

我们先来看一张图

如图所示，我们在节点B上绑定touch事件，圆圈代表触摸点。

此时节点B有3个触摸点，即targetTouches数组有3项，分别储存着触摸点的信息，此时touches和targetTouches是相同的。

当我们将手指3移出节点B（始终保持3个手指触摸在屏幕上），那么touchmove事件触发，targetTouches只剩2项，而touches依然有3项，此时changedTouches只有一项（因为只有手指3改变了）。

然后我们让所有手指离开屏幕，那么此时touchend事件触发，touches只剩0项，targetTouches剩0项，changedTouches有3项（因为3个手指发生了变化）。

好了，理解这些概念，有助于我们理解代码中何时改去哪个touch数组里面的值。

tap可以理解为点击事件，和click不同的是，移动端的click事件有大约300ms的延迟，这是因为浏览器要判断是否为双击事件。

思路

touchstart：时记录时间点以及触摸点的x、y坐标

touchend：计算此时与开始时的时间差，水平和垂直方向的偏移量

说明：时间差用来判断用户触摸的时长，超过规定时间则tap事件无效；偏移量用来判断用户的触摸事件内是否有过移动的痕迹，这里我们允许少量的偏移，因为手指可能出现抖动的情况

实现

const tapDefaults = {
  time: 250,
  offset: 10
}

export default function tap (node, a, b) {
  let st, sx, sy
  let opts, callback

  if (typeof a === "function") {
    callback = a
    opts = Object.assign({}, tapDefaults, b)
  } else {
    callback = b
    opts = Object.assign({}, tapDefaults, a)
  }

  node.addEventListener("touchstart", (e) => {
    e.preventDefault() // 组织浏览器默认行为，防止触摸过程页面滚动

    const touch = e.targetTouches[0]
    st = e.timeStamp
    sx = touch.pageX
    sy = touch.pageY
  }, false)

  node.addEventListener("touchend", (e) => {
    const touch = e.changedTouches[0]

    if (
      // 若为长按，则将时间判定条件更改
      e.timeStamp - st <= opts.time &&
      Math.abs(touch.pageX - sx) <= opts.offset &&
      Math.abs(touch.pageY - sy) <= opts.offset
    ) {
      callback && callback()
    }
  }, false)
}

即双击事件，两次点击时间间隔不超过规定时间则视为有效。

思路

第一次有效点击，记录该状态，反之重置状态

第二次有效点击，触发事件并重置状态

若两次时间间隔过长，重置状态

实现

const tapDefaults = {
  time: 250,
  offset: 10
}

function handler (node, inject) {
  let st, sx, sy

  node.addEventListener("touchstart", (e) => {
    e.preventDefault()

    const touch = e.targetTouches[0]
    st = e.timeStamp
    sx = touch.pageX
    sy = touch.pageY
  }, false)

  node.addEventListener("touchend", (e) => {
    const touch = e.changedTouches[0]

    inject({
      time: e.timeStamp - st,
      offsetX: Math.abs(touch.pageX - sx),
      offsetY: Math.abs(touch.pageY - sy)
    })
  }, false)
}

export function doubletap (node, a, b) {
  let opts, callback
  let status = 0

  if (typeof a === "function") {
    callback = a
    opts = Object.assign({}, tapDefaults, b)
  } else {
    callback = b
    opts = Object.assign({}, tapDefaults, a)
  }

  handler(node, (info) => {
    if (
      info.time <= opts.time &&
      info.offsetX <= opts.offset &&
      info.offsetY <= opts.offset
    ) {
      if (status === 0) {
        status = 1
        // 时间间隔太长则重置状态
        setTimeout(() => {
          status = 0
        }, opts.time)
      } else if (status === 1) {
        callback && callback()
        status = 0
      }
    } else {
      status = 0
    }
  })
}

即长按，手指按住超过规定时间视为有效，在手指离开时触发。

思路

和tap事件思路一样，只不过时间的判定条件变更一下，改为超过多长时间才触发

实现

const longtapDefaults = {
  time: 350,
  offset: 10
}

// 这里代码逻辑和tap事件一样
// 更改时间判定为：
// e.timeStamp - st > opts.time

即按压事件，按住超过规定时间自动触发，注意和longtap不同的是，longtap需要等到手指离开时触发，而press在按压时间达到规定值，自动触发，此时手指还在屏幕上。

思路

touchstart：记录此时的x、y坐标，并且开启一个定时器，在规定时间后执行回调，默认是350ms

touchmove：监听移动过程，在事件触发前，若出现偏移量过大，则取消定时器

touchend：取消定时器

分析：根据以上思路，若按压时间短，则手指离开时定时器已取消，回调不会触发。

实现

const pressDefaults = {
  time: 350,
  offset: 10
}

export default function press (node, a, b) {
  let opts, callback, sx, sy
  let timer = null

  if (typeof a === "function") {
    callback = a
    opts = Object.assign({}, pressDefaults, b)
  } else {
    callback = b
    opts = Object.assign({}, pressDefaults, a)
  }

  node.addEventListener("touchstart", (e) => {
    e.preventDefault()

    const touch = e.targetTouches[0]
    sx = touch.pageX
    sy = touch.pageY

    timer = setTimeout(() => {
      callback && callback()
    }, opts.time)
  }, false)

  node.addEventListener("touchmove", (e) => {
    const touch = e.targetTouches[0]

    if (
      Math.abs(touch.pageX - sx) > opts.offset ||
      Math.abs(touch.pageY - sy) > opts.offset
    ) {
      clearTimeout(timer)
    }
  }, false)

  node.addEventListener("touchend", () => {
    clearTimeout(timer)
  }, false)
}

即手指滑动事件，应用场景如：轮播图左右滑动切换，整屏页面滑动翻页等，算是移动端最常见的手势之一了。

思路

touchstart：记录时间点和触摸点位置

touchmove：实时判断滑动偏移量

touchend：计算滑动速度和方向，条件判定是否触发事件

分析：考虑到需要在滑动过程做一些动画特效等操作，因此我们将滑动中的事件暴露给用户自定义，值得注意的是，若是要实时改变滑块位置的话，最好不要截流或防抖，截流会造成滑动卡顿的现象，而防抖会出现延迟同步滑动操作的情况；另外对滑动速度也进行了处理，原则上用户滑动距离超过规定后即视为有效，然而为了更好的用户体验，我们判定，如果用户在短时间内滑动速度非常快的话，也视为一次有效的操作，不一定非要滑动很长的距离

实现

const swipeDefaults = {
  direction: "horizontal", // vertical
  speed: 200,
  offset: 100,
  prevent: true,
  // touchmove: (offset) => {}
}

export default function swipe (node, a, b) {
  let opts, callback, sTime, sTouch, eTouch

  if (typeof a === "function") {
    callback = a
    opts = Object.assign({}, swipeDefaults, b)
  } else {
    callback = b
    opts = Object.assign({}, swipeDefaults, a)
  }

  node.addEventListener("touchstart", (e) => {
    if (opts.prevent) {
      e.preventDefault()
    }

    sTime = e.timeStamp
    sTouch = eTouch = e.targetTouches[0]
  }, false)

  if (typeof opts.touchmove === "function") {
    node.addEventListener("touchmove", (e) => {
      eTouch = e.targetTouches[0]

      if (opts.direction === "horizontal") {
        opts.touchmove(eTouch.pageX - sTouch.pageX)
      } else {
        opts.touchmove(eTouch.pageY - sTouch.pageY)
      }
    }, false)
  }

  node.addEventListener("touchend", (e) => {
    eTouch = e.changedTouches[0]

    let time = e.timeStamp - sTime
    let offset, direction

    if (opts.direction === "horizontal") {
      offset = eTouch.pageX - sTouch.pageX
      direction = offset > 0 ? "right" : "left"
    } else {
      offset = eTouch.pageY - sTouch.pageY
      direction = offset > 0 ? "down" : "up"
    }

    if (
      Math.abs(offset) >= opts.offset ||
      Math.abs(offset) / time * 1000 >= opts.speed
    ) {
      callback && callback(direction)
    }
  }, false)
}

通过以上的思路讲解和代码实现，我们完成了一个单点触控的移动端手势库，是不是迫不及待的想要一睹为快、体验一番。

最后附上本次分享的源码和文档：https://github.com/ansenhuang/axe/blob/master/packages/touch/README.md