移动端手势库设计与实践

前言

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

核心技术

主要就是利用移动端的以下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

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)
}

doubletap

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

思路

• 第一次有效点击，记录该状态，反之重置状态
• 第二次有效点击，触发事件并重置状态
• 若两次时间间隔过长，重置状态

实现

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
    }
  })
}

longtap

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

思路

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

实现

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

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

press

即按压事件，按住超过规定时间自动触发，注意和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)
}

swipe

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

思路

• 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