正文

zepto中的touch库与fastclick

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、 touch库实现了什么和引入背景

click 事件在移动端上会有 300ms 的延迟，同时因为需要 长按 ， 双触击 等富交互，所以我们通常都会引入类似 zepto 这样的库。zepto 中touch库实现了 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap' 这样一些功能。

2、touch库实现 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'重要 源代码（绑定在touchend事件上） 

 if((_isPointerType = isPointerEventType(e, 'up')) &&

           !isPrimaryTouch(e)) return

         cancelLongTap()

     // 如果是 swipe，x 轴或者 y 轴移动超过 30px

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

         (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))

       swipeTimeout = setTimeout(function() {

         touch.el.trigger('swipe')

         // swipeDirection 是判断 swipe 方向的

         touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))

         touch = {}

       }, 0)

     // tap 事件

     else if ('last' in touch)

       if (deltaX < 30 && deltaY < 30) {

          // tapTimeout 是为了 scroll 的时候方便清除

         tapTimeout = setTimeout(function() {

           // 创建 tap 事件，并增加 cancelTouch 方法

           var event = $.Event('tap')

           event.cancelTouch = cancelAll

           touch.el.trigger(event)

           // 触发 DoubleTap

           if (touch.isDoubleTap) {

             if (touch.el) touch.el.trigger('doubleTap')

             touch = {}

           }

           // singleTap （这个概念是相对于 DoubleTap 的，可以看看我们在最初的那段源码解析中有这样一段 if (delta > 0 && delta <= 250) touch.isDoubleTap = true ，所以 250 ms 之后没有二次触摸的就算是 singleTap 了

           else {

             touchTimeout = setTimeout(function(){

               touchTimeout = null

               if (touch.el) touch.el.trigger('singleTap')

               touch = {}

             }, 250)

           }

         }, 0)

       } else {

         touch = {}

       }

       deltaX = deltaY = 0

touch库对 touchstart, touchmove, touchend 做了一些封装和判断，然后通过 zepto 自己的事件体系来注册和触发。

3、fastclick 与 zepto

fastclick解决了zepto的点透问题，同时也解决了click的300ms延迟问题。

zepto 是一个移动端的 js 库，而 fastclick 专注于 click 在移动端的触发问题。

zepto 和 fastclick 都有用到 touchEvent ，但是 zepto 当中用的是 e.touches 而 fastclick 却用的是 e.targetTouches 。

3.1、细说touchEvent

属性：

(1). TouchEvent.changedTouches 一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。

(2). TouchEvent.targetTouches 一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点.

(3). TouchEvent.touches 一个 TouchList 对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。

(4). TouchEvent.type 此次触摸事件的类型，可能值为 touchstart, touchmove, touchend 等等

(5). TouchEvent.target 触摸事件的目标 element，这个目标元素对应 TouchEvent.changedTouches 中的触点的起始元素。

(6). TouchEvent.altKey, TouchEvent.ctrlKey, TouchEvent.metaKey, TouchEvent.shiftKey 触摸事件触发时，键盘对应的键（例如 alt ）是否被按下。

3.2、细说TouchList 与 Touch

TouchList 就是一系列的 Touch，通过 TouchList.length 可以知道当前有几个触点， TouchList[0] 或者 TouchList.item(0) 用来访问第一个触点。

属性：

(1). Touch.identifier ：touch 的唯一标志，整个 touch 过程中（也就是 end 之前）不会改变

(2). Touch.screenX 和 Touch.screenY ：坐标原点为屏幕左上角

(3). Touch.clientX 和 Touch.clientY ：坐标原点在当前可视区域左上角，这两个值不包含滚动偏移

(4). Touch.pageX 和 Touch.pageY ：坐标原点在HTML文档左上角，这两个值包含了水平滚动的偏移

(5). Touch.radiusX 和 Touch.radiusY ：触摸平面的最小椭圆的水平轴(X轴)半径和垂直轴(Y轴)半径

(6). Touch.rotationAngle ：触摸平面的最小椭圆与水平轴顺时针夹角

(7). Touch.force ：压力值 0.0-1.0

(8). Touch.target ：Touch相关事件触发时的 element 不会随 move 变化。如果 move 当中该元素被删掉，这个 target 依然会不变，但不会冒泡。最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件

大家有什么疑问，请多多留言哦！！！

相关阅读

目录[+]