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- ...
随机推荐
- 统计UPD丢包工具
下载位置:https://github.com/eyjian/libmooon/tree/master/shell #!/bin/bash # 统计UPD丢包工具 # 可选参数1:统计间隔(单位:秒, ...
- js基础学习笔记(一)
* 在js编写过程中,尽量保持统一使用单引号 'XXXX': * 所有变量都要声明 var,避免全局函数调用的冲突: 1.1 输出内容 docment.write(‘aileLi’); 改变某I ...
- (转)memcached的运行状态监控
转自:http://hi.baidu.com/software_one/item/e7e2b5846ba28bcaef083df3 当memcached启动起来并被访问后,如何知道其详细运行情况呢,详 ...
- linux 配置阿里云yum库
备份当前yum库 mv /etc/yum.repos.d /etc/yum.repos.d.backup4comex 新建yum源配置目录 mkdir /etc/yum.repos.d 设置阿里yum ...
- jenkins+maven+svn构建项目,及远程部署war包到tomcat上
要使用jenkins构建项目,当然要使用jenkins了,我使用的war版本的jenkins jenkins的官网 http://jenkins-ci.org/ 点击latest下载,但是可能因为天朝 ...
- CSS 基础 例子 水平 & 垂直对齐
一.元素居中对齐 margin:auto 水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100% ...
- [php-cookie] cookie 请求跨域,如何共享
cookie 请求跨域的问题, 假设我有两个域名,一个 m.example.com,另一个是 www.example.com . 那么我需要如何设置 cookie 才可以在这两个域名都实现共享呢? / ...
- poj 2886 线段树的更新+反素数
Who Gets the Most Candies? Time Limit: 5000 MS Memory Limit: 0 KB 64-bit integer IO format: %I64d , ...
- ConcurrentHashMap源码解析(3)
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 4.get(Object key) 使用方法: map.get("hello"); 源代 ...
- Spring IOC 容器源码分析 - 获取单例 bean
1. 简介 为了写 Spring IOC 容器源码分析系列的文章,我特地写了一篇 Spring IOC 容器的导读文章.在导读一文中,我介绍了 Spring 的一些特性以及阅读 Spring 源码的一 ...