如何实现swipe、tap、longTap等自定义事件

时间  2019-11-05
标签 如何 实现 swipe tap longtap 自定义 事件 繁體版
原文   原文链接

前言

移动端原生支持touchstart、touchmove、touchend等事件，可是在日常业务中咱们常常须要使用swipe、tap、doubleTap、longTap等事件去实现想要的效果，对于这种自定义事件他们底层是如何实现的呢？让咱们从Zepto.js的touch模块去分析其原理。您也能够直接查看touch.js源码注释javascript

源码仓库java

原文连接git

touch

事件简述

Zepto的touch模块实现了不少与手势相关的自定义事件，分别是swipe, swipeLeft, swipeRight, swipeUp, swipeDown,doubleTap, tap, singleTap, longTapgithub

事件名称 事件描述
swipe 滑动事件
swipeLeft ←左滑事件
swipeRight →右滑事件
swipeUp ↑上滑事件
swipeDown ↓下滑事件
doubleTap 双击事件
tap 点击事件(非原生click事件)
singleTap 单击事件
longTap 长按事件 
;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){
  $.fn[eventName] = function(callback){ return this.on(eventName, callback) }
})

复制代码

能够看到Zepto把这些方法都挂载到了原型上，这意味着，你能够直接用简写的方式例如$('body').tap(callback)面试

前置条件

在开始分析这些事件如何实现以前，咱们先了解一些前置条件ajax

  • 部份内部变量
var touch = {},
    touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,
    // 长按事件定时器时间
    longTapDelay = 750,
    gesture

复制代码

touch: 用以存储手指操做的相关信息，例如手指按下时的位置，离开时的坐标等。json

touchTimeout,tapTimeout, swipeTimeout,longTapTimeout分别存储singleTap、tap、swipe、longTap事件的定时器。浏览器

longTapDelay:longTap事件定时器延时时间缓存

gesture: 存储ieGesture事件对象框架

  • 滑动方向判断(swipeDirection)

咱们根据下图以及对应的代码来理解滑动的时候方向是如何断定的。须要注意的是浏览器中的“坐标系”和数学中的坐标系仍是不太同样，Y轴有点反过来的意思。

手机屏幕坐标图 

/** * 判断移动的方向,结果是Left, Right, Up, Down中的一个 * @param {} x1 起点的横坐标 * @param {} x2 终点的横坐标 * @param {} y1 起点的纵坐标 * @param {} y2 终点的纵坐标 */

function swipeDirection(x1, x2, y1, y2) {
  /** * 1. 第一个三元运算符获得若是x轴滑动的距离比y轴大，那么是左右滑动，不然是上下滑动 * 2. 若是是左右滑动，起点比终点大那么往左滑动 * 3. 若是是上下滑动，起点比终点大那么往上滑动 * 须要注意的是这里的坐标和数学中的有些不必定 纵坐标有点反过来的意思 * 起点p1(1, 0) 终点p2(1, 1) */
  return Math.abs(x1 - x2) >=
    Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
}

复制代码
  • 触发长按事件
function longTap() {
  longTapTimeout = null
  if (touch.last) {
    // 触发el元素的longTap事件
    touch.el.trigger('longTap')
    touch = {}
  }
}

复制代码

在触发长按事件以前先将longTapTimeout定时器取消，若是touch.last还存在则触发之，为何要判断touch.last呢，由于swip, doubleTap,singleTap会将touch对象置空，当这些事件发生的时候，天然不该该发生长按事件。

  • 取消长按，以及取消全部事件
// 取消长按
function cancelLongTap() {
  if (longTapTimeout) clearTimeout(longTapTimeout)
  longTapTimeout = null
}

// 取消全部事件

function cancelAll() {
  if (touchTimeout) clearTimeout(touchTimeout)
  if (tapTimeout) clearTimeout(tapTimeout)
  if (swipeTimeout) clearTimeout(swipeTimeout)
  if (longTapTimeout) clearTimeout(longTapTimeout)
  touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
  touch = {}
}
复制代码

方式都是相似，先调用clearTimeout取消定时器，而后释放对应的变量，等候垃圾回收。

总体结构分析

$(document).ready(function(){
  /** * now 当前触摸时间 * delta 两次触摸的时间差 * deltaX x轴变化量 * deltaY Y轴变化量 * firstTouch 触摸点相关信息 * _isPointerType 是不是pointerType */
  var now, delta, deltaX = 0, deltaY = 0, firstTouch, _isPointerType

  $(document)
    .bind('MSGestureEnd', function(e){
      // xxx 先不看这里
    })
    .on('touchstart MSPointerDown pointerdown', function(e){
      // xxx 关注这里
    })
    .on('touchmove MSPointerMove pointermove', function(e){
      // xxx 关注这里
    })
    .on('touchend MSPointerUp pointerup', function(e){
      // xxx 关注这里
    })
    .on('touchcancel MSPointerCancel pointercancel', cancelAll)

    $(window).on('scroll', cancelAll)
  })


复制代码

这里将详细代码暂时省略了，留出总体框架，能够看出Zepto在dom，ready的时候在document上添加了MSGestureEnd,touchstart MSPointerDown pointerdown,touchmove MSPointerMove pointermove,touchcancel MSPointerCancel pointercancel等事件，最后还给在window上加了scroll事件。咱们将目光聚焦在touchstart,touchmove,touchend对应的逻辑,其余相对少见的事件在暂不讨论

touchstart

if((_isPointerType = isPointerEventType(e, 'down')) 
&& !isPrimaryTouch(e)) return

复制代码

要走到touchstart事件处理程序后续逻辑中，须要先知足一些条件。究竟是哪些条件呢？先来看看isPointerEventType, isPrimaryTouch两个函数作了些什么。

**isPointerEventType

function isPointerEventType(e, type){
  return (e.type == 'pointer'+type ||
    e.type.toLowerCase() == 'mspointer'+type)
}

复制代码

Pointer Event相关知识点击这里

isPrimaryTouch

function isPrimaryTouch(event){
  return (event.pointerType == 'touch' ||
    event.pointerType == event.MSPOINTER_TYPE_TOUCH)
    && event.isPrimary
}

复制代码

根据mdn pointerType,其类型能够是mouse,pen,touch，这里只处理其值为touch而且isPrimary为true的状况。

接着回到

if((_isPointerType = isPointerEventType(e, 'down')) 
&& !isPrimaryTouch(e)) return

复制代码

其实就是过滤掉非触摸事件。

触摸点信息兼容处理

// 若是是pointerdown事件则firstTouch保存为e，不然是e.touches第一个
firstTouch = _isPointerType ? e : e.touches[0]

复制代码

这里只清楚e.touches[0]的处理逻辑，另外一种不太明白，望有知晓的同窗告知一下，感谢感谢。

复原终点坐标

// 通常状况下，在touchend或者cancel的时候，会将其清除，若是用户调阻止了默认事件，则有可能清空不了,可是为何要将终点坐标清除呢？
if (e.touches && e.touches.length === 1 && touch.x2) {
  // Clear out touch movement data if we have it sticking around
  // This can occur if touchcancel doesn't fire due to preventDefault, etc.
  touch.x2 = undefined
  touch.y2 = undefined
}

复制代码

存储触摸点部分信息

// 保存当前时间
now = Date.now()
// 保存两次点击时候的时间间隔，主要用做双击事件
delta = now - (touch.last || now)
// touch.el 保存目标节点
// 不是标签节点则使用该节点的父节点，注意有伪元素
touch.el = $('tagName' in firstTouch.target ?
  firstTouch.target : firstTouch.target.parentNode)
// touchTimeout 存在则清除之，能够避免重复触发
touchTimeout && clearTimeout(touchTimeout)
// 记录起始点坐标（x1, y1）（x轴，y轴）
touch.x1 = firstTouch.pageX
touch.y1 = firstTouch.pageY

复制代码

判断双击事件

// 两次点击的时间间隔 > 0 且 < 250 毫秒，则当作doubleTap事件处理
if (delta > 0 && delta <= 250) touch.isDoubleTap = true

复制代码

处理长按事件

// 将now设置为touch.last，方便上面能够计算两次点击的时间差
touch.last = now
// longTapDelay(750毫秒)后触发长按事件
longTapTimeout = setTimeout(longTap, longTapDelay)

复制代码

touchmove

.on('touchmove MSPointerMove pointermove', function(e){
  if((_isPointerType = isPointerEventType(e, 'move')) &&
    !isPrimaryTouch(e)) return
  firstTouch = _isPointerType ? e : e.touches[0]
  // 取消长按事件，都移动了，固然不是长按了
  cancelLongTap()
  // 终点坐标 (x2, y2)
  touch.x2 = firstTouch.pageX
  touch.y2 = firstTouch.pageY
  // 分别记录X轴和Y轴的变化量
  deltaX += Math.abs(touch.x1 - touch.x2)
  deltaY += Math.abs(touch.y1 - touch.y2)
})

复制代码

手指移动的时候，作了三件事情。

  1. 取消长按事件
  2. 记录终点坐标
  3. 记录x轴和y轴的移动变化量

touchend

.on('touchend MSPointerUp pointerup', function(e){
  if((_isPointerType = isPointerEventType(e, 'up')) &&
    !isPrimaryTouch(e)) return
  // 取消长按事件 
  cancelLongTap()
  // 滑动事件，只要X轴或者Y轴的起始点和终点的距离超过30则认为是滑动，并触发滑动(swip)事件,
  // 紧接着立刻触发对应方向的swip事件（swipLeft, swipRight, swipUp, swipDown）
  // swipe
  if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
      (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))

    swipeTimeout = setTimeout(function() {
      if (touch.el){
        touch.el.trigger('swipe')
        touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
      }
      touch = {}
    }, 0)
  // touch对象的last属性，在touchstart事件中添加，因此触发了start事件便会存在 
  // normal tap
  else if ('last' in touch)
    // don't fire tap when delta position changed by more than 30 pixels,
    // for instance when moving to a point and back to origin
    // 只有当X轴和Y轴的变化量都小于30的时候，才认为有可能触发tap事件
    if (deltaX < 30 && deltaY < 30) {
      // delay by one tick so we can cancel the 'tap' event if 'scroll' fires
      // ('tap' fires before 'scroll')
      tapTimeout = setTimeout(function() {

        // trigger universal 'tap' with the option to cancelTouch()
        // (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
        // 建立自定义事件
        var event = $.Event('tap')
        // 往自定义事件中添加cancelTouch回调函数，这样使用者能够经过该方法取消全部的事件
        event.cancelTouch = cancelAll
        // [by paper] fix -> "TypeError: 'undefined' is not an object (evaluating 'touch.el.trigger'), when double tap
        // 当目标元素存在，触发tap自定义事件
        if (touch.el) touch.el.trigger(event)

        // trigger double tap immediately
        // 若是是doubleTap事件，则触发之，并清除touch
        if (touch.isDoubleTap) {
          if (touch.el) touch.el.trigger('doubleTap')
          touch = {}
        }

        // trigger single tap after 250ms of inactivity
        // 不然在250毫秒以后。触发单击事件
        else {
          touchTimeout = setTimeout(function(){
            touchTimeout = null
            if (touch.el) touch.el.trigger('singleTap')
            touch = {}
          }, 250)
        }
      }, 0)
    } else {
      // 不是tap相关的事件
      touch = {}
    }
    // 最后将变化量信息清空
    deltaX = deltaY = 0

})

复制代码

touchend事件触发时，相应的注释都在上面了，可是咱们来分解一下这段代码。

swip事件相关

if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
  (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))

swipeTimeout = setTimeout(function() {
  if (touch.el){
    touch.el.trigger('swipe')
    touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
  }
  touch = {}
}, 0)

复制代码

手指离开后，经过判断x轴或者y轴的位移，只要其中一个跨度大于30便会触发swip及其对应方向的事件。

tap,doubleTap,singleTap

这三个事件可能触发的前提条件是touch对象中还存在last属性,从touchstart事件处理程序中知道last在其中记录，而在touchend以前被清除的时机是长按事件被触发longTap,取消全部事件被调用cancelAll

if (deltaX < 30 && deltaY < 30) {
  // delay by one tick so we can cancel the 'tap' event if 'scroll' fires
  // ('tap' fires before 'scroll')
  tapTimeout = setTimeout(function() {

    // trigger universal 'tap' with the option to cancelTouch()
    // (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
    var event = $.Event('tap')
    event.cancelTouch = cancelAll
    // [by paper] fix -> "TypeError: 'undefined' is not an object (evaluating 'touch.el.trigger'), when double tap
    if (touch.el) touch.el.trigger(event)
  }    
}
复制代码

只有当x轴和y轴的变化量都小于30的时候才会触发tap事件，注意在触发tap事件以前，Zepto还将往事件对象上添加了cancelTouch属性，对应的也就是cancelAll方法，即你能够经过他取消全部的touch相关事件。

// trigger double tap immediately

if (touch.isDoubleTap) {
  if (touch.el) touch.el.trigger('doubleTap')
  touch = {}
}

// trigger single tap after 250ms of inactivity

else {
  touchTimeout = setTimeout(function(){
    touchTimeout = null
    if (touch.el) touch.el.trigger('singleTap')
    touch = {}
  }, 250)
}


复制代码

在发生触发tap事件以后，若是是doubleTap，则会紧接着触发doubleTap事件，不然250毫秒以后触发singleTap事件，而且都会讲touch对象置为空对象，以便下次使用

// 最后将变化量信息清空
deltaX = deltaY = 0

复制代码

touchcancel

.on('touchcancel MSPointerCancel pointercancel', cancelAll)

复制代码

当touchcancel被触发的时候，取消全部的事件。

scroll

$(window).on('scroll', cancelAll)

复制代码

当滚动事件被触发的时候，取消全部的事件（这里有些不解，滚动事件触发，彻底有多是要触发tap或者swip等事件啊）。

结尾

最后说一个面试中常常会问的问题，touch击穿现象。若是对此有兴趣能够查看移动端click延迟及zepto的穿透现象, 新年第一发--深刻不浅出zepto的Tap击穿问题

参考

  1. 移动端click延迟及zepto的穿透现象

  2. 新年第一发--深刻不浅出zepto的Tap击穿问题

  3. 读Zepto源码之Touch模块

  4. pointerType

  5. [翻译]整合鼠标、触摸 和触控笔事件的Html5 Pointer Event Api

文章目录

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程