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事件上)
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 依然会不变,但不会冒泡。最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件
大家有什么疑问,请多多留言哦!!!
zepto中的touch库与fastclick的更多相关文章
- zepto.js的touch模块
touch库实现了什么和引入背景 touch模块是基于zepto.js的. click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 ze ...
- Linux中的动态库和静态库(.a/.la/.so/.o)
Linux中的动态库和静态库(.a/.la/.so/.o) Linux中的动态库和静态库(.a/.la/.so/.o) C/C++程序编译的过程 .o文件(目标文件) 创建atoi.o 使用atoi. ...
- 在iOS中创建静态库
如果您有不错的原创或译文,欢迎提交给我们,更欢迎其他朋友加入我们的翻译小组(联系qq:2408167315). =========================================== ...
- 深入cocos2d-x中的touch事件
深入cocos2d-x中的touch事件 在文章cocos2d-x中处理touch事件中简单讨论过怎样处理touch事件, 那么今天来深入了解下cocos2d-x中是怎样分发touch事件的. 我们最 ...
- WebGIS中基于控制点库进行SHP数据坐标转换的一种查询优化策略
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 目前项目中基于控制点库进行SHP数据的坐标转换,流程大致为:遍 ...
- Android中的Touch事件
Android中的Touch事件处理 主要内容 Activity或View类的onTouchEvent()回调函数会接收到touch事件. 一个完整的手势是从ACTION_DOWN开始,到ACTION ...
- iOS / Android 移动设备中的 Touch Icons
上次转载了一篇<将你的网站打造成一个iOS Web App>,但偶然发现这篇文章的内容有些是错误的——准确来说也不是错误,只是不适合自半年前来的情况了(也可以说是iOS7 之后的时间)—— ...
- 在Linux中创建静态库.a和动态库.so
转自:http://www.cnblogs.com/laojie4321/archive/2012/03/28/2421056.html 在Linux中创建静态库.a和动态库.so 我们通常把一些公用 ...
- 详细地jsoncpp编译方法 和 vs2010中导入第三方库的方法
详细地jsoncpp编译方法 和 vs2010中导入第三方库的方法 一 编译链接 1 在相应官网下载jsoncpp 2 解压得到jsoncpp-src-0.5.0文件 3 打开jsoncpp-src- ...
随机推荐
- Windows网络编程(C/C++服务器编程)
Windows服务器网络编程 Linux服务器网络编程
- chrome用type=file获取图片路径并转base64字符串
1 html页面 <div class="col-sm-2" style="height: 200px;margin-top: 14px;"> &l ...
- 原生JS一些操作
很久没写原生的JS了,上周做了一个小东西让我又重新了解了一下原生JS,以下记录一些常见的原生JS var canvArrow = document.getElementById('js-canv_ar ...
- java基础-day23
第11天 面向网络编程 今日内容介绍 u 网络编程概述 u UDP u TCP 第1章 网络编程概述 1.1 网络协议 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的 ...
- CSS 基础 例子 盒子模型及外边距塌陷
我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...
- SET FOREIGN_KEY_CHECKS=0;在Mysql中取消外键约束
Mysql中如果表和表之间建立的外键约束,则无法删除表及修改表结构. 解决方法是在Mysql中取消外键约束: SET FOREIGN_KEY_CHECKS=0; 然后将原来表的数据导 ...
- hdu 1226 超级密码
超级密码 Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem D ...
- 浅析C#中的Thread ThreadPool Task和async/await
.net 项目中不可避免地要与线程打交道,目的都是实现异步.并发.从最开始的new Thread()入门,到后来的Task.Run(),如今在使用async/await的时候却有很多疑问. 先来看一段 ...
- 在我朝如何为Brackets安装扩展?
Brackets是Adobe发起的一个开源的HTML编辑器,界面优美简洁.扩展丰富.支持基于Chrome浏览器的实时预览,非常适合对于Web的开发和学习. 但是Brackets的安装包下载和扩展下载, ...
- Unity 屏幕外死亡的敌人的分数显示在屏幕内
在敌人死亡后,会出现分数,如果敌人死亡的位置在屏幕内,那么使得获得的分数显示在屏幕内,超出屏幕范围的,显示在屏幕外 当然,这里例子是使得场景中的物体显示在屏幕内,当然也可以使用纯粹的UGUI物体的显示 ...