zepto中的touch库与fastclick

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事件上)

 1 if((_isPointerType = isPointerEventType(e, ‘up‘)) &&
 2           !isPrimaryTouch(e)) return
 3         cancelLongTap()
 4
 5     // 如果是 swipe,x 轴或者 y 轴移动超过 30px
 6     if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
 7         (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))
 8
 9       swipeTimeout = setTimeout(function() {
10         touch.el.trigger(‘swipe‘)
11         // swipeDirection 是判断 swipe 方向的
12         touch.el.trigger(‘swipe‘ + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
13         touch = {}
14       }, 0)
15
16     // tap 事件
17     else if (‘last‘ in touch)
18       if (deltaX < 30 && deltaY < 30) {
19          // tapTimeout 是为了 scroll 的时候方便清除
20         tapTimeout = setTimeout(function() {
21           // 创建 tap 事件,并增加 cancelTouch 方法
22           var event = $.Event(‘tap‘)
23           event.cancelTouch = cancelAll
24           touch.el.trigger(event)
25
26           // 触发 DoubleTap
27           if (touch.isDoubleTap) {
28             if (touch.el) touch.el.trigger(‘doubleTap‘)
29             touch = {}
30           }
31
32           // singleTap (这个概念是相对于 DoubleTap 的,可以看看我们在最初的那段源码解析中有这样一段 if (delta > 0 && delta <= 250) touch.isDoubleTap = true ,所以 250 ms 之后没有二次触摸的就算是 singleTap 了
33           else {
34             touchTimeout = setTimeout(function(){
35               touchTimeout = null
36               if (touch.el) touch.el.trigger(‘singleTap‘)
37               touch = {}
38             }, 250)
39           }
40         }, 0)
41       } else {
42         touch = {}
43       }
44       deltaX = deltaY = 0

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

3、fastclick 与 zepto

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 依然会不变,但不会冒泡。最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件

大家有什么疑问,请多多留言哦!!!

时间: 2025-01-02 14:06:56

zepto中的touch库与fastclick的相关文章

zepto.js touch库

最近在做一个手机版的项目,而做手机网页,那么就会考虑到用轻量级库,用jquery的话,会比较庞大,而我们就选用 zepto.js 来做开发,可是在开发的时候要用到手势事件(比如左右滑动,上下滑动),于是就在网上查了一下 zepto.js 的官网,发现有 touch 事件来模拟手势事件,这个开发就会带来便利,而不用去写JS底层代码:在网上搜罗了一下 zepto.js touch 库,找到了不多 touch.js 的相关信息,真的感觉很少(不知道是不是zepto.js不成熟的表现),终于在网上搜罗到

zepto.js的touch模块

 touch库实现了什么和引入背景 touch模块是基于zepto.js的. click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中touch库实现了 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap' 这样一些功能. 注意:事件名在此模块是驼峰

在iOS中创建静态库

如果你作为iOS开发者已经有一段时间,可能会有一套属于自己的类和工具函数,它们在你的大多数项目中被重用. 重用代码的最简单方法是简单的 拷贝/粘贴 源文件.然而,这种方法很快就会成为维护时的噩梦.因为每个app都有自己的一份代码副本,你很难在修复bug或者升级时保证所有副本的同步. 这就是静态库要拯救你的.一个静态库是若干个类,函数,定义和资源的包装,你可以将其打包并很容易的在项目之间共享. 在本教程中,你将用两种方法亲手创建你自己的通用静态库. 为了获得最佳效果,你应该熟悉Objective-

详解Xcode7中创建静态库

今天和大家一起来谈谈Xcode中的静态库,包括什么是静态库,如何在Xcode中创建静态库等内容,希望这篇Xcode教程 http://www.maiziedu.com/course/234/对打击有帮助. 一.静态库和动态库的区别: 静态库和动态库是相对编译期和运行期的,静态库以 .a 和 .framework 形式存在,链接时,静态库会被完整地复制到可执行文件中,被多次使用就有多份冗余拷贝:动态库以 .dylib 和 .framework 形式存在,链接时不复制,程序运行时由系统动态加载到内存

iOS中创建动态库及调用方法

去年因需要用到动态库,自己就找了好多一些 资料,最终找到了一套方法,怎么创建与使用动态库,记录一下: Xcode提供了在iOS工程中创建静态库的功能,和在MAC上创建动态库和静态库的功能. 但是没有提供在iOS工程中创建动态库的功能(苹果官方不允许程序中存在动态库链接,这样的程序会被AppStore拒),如下图:  由于苹果不支持自己创建iOS动态库,所以要想创建动态库首先要修改Xcode的配置文件使其支持具备创建iOS 动态库的功能, 经过调研和查询网上的一些资料,并经过自己测试成功,以下是修

android中根据touch事件判断单击及双击

private static final int MAX_INTERVAL_FOR_CLICK = 250;     private static final int MAX_DISTANCE_FOR_CLICK = 100;     private static final int MAX_DOUBLE_CLICK_INTERVAL = 500;     int mDownX = 0;     int mDownY = 0;     int mTempX = 0;     int mTempY

如何在android app中使用STL库

方法: 1.在jni目录下新建Application.mk; 加入 APP_STL := stlport_static右边的值还可以换成下面几个: system - 使用默认最小的C++运行库,这样生成的应用体积小,内存占用小,但部分功能将无法支持 stlport_static - 使用STLport作为静态库,这项是Android开发网极力推荐的 stlport_shared - STLport作为动态库,这个可能产生兼容性和部分低版本的Android固件,目前不推荐使用. gnustl_st

C++ 中的动态库(Windows)

库: 在C/C++中,使用库(Library)的技术,可以将编译好的符号提供给第三方使用. 库有两种: 1.动态库 Dynamic-Link Library (DLL)    (Linux下叫做 Shared Library) 2.静态库 Static Library 一.动态库的基本概念 创建DLL: 用VC创建一个类型为 "dll"的控制台项目,VC会自动创建DLL的项目框架 它自动生成一个DllMain函数,可以类比普通应用程序中的main函数 VC项目设置: 1.取消"

Linux学习笔记7——linux中的静态库和动态库

一.静态库的编译 静态库的编译过程如下: 1.编译成目标文件 这里有一个可选项-static,调用格式:gcc -c -static 代码文件名.c 2.归档成静态库 A.归档的工具是ar工具,使用ar -r可以将文件归档成静态库,调用格式:ar -r 静态库文件 被归档的文件 例如:我们这有两个C文件,分别为test1.c和test2.c 首先我们将它编译成目标文件:gcc -c -static test1.c gcc -c -static test2.c 此时会产生两个文件,分别为test1