移动触摸事件、触摸坐标的使用

移动上的事件

移动端上使用click

移动端上使用click的问题

click延时（300ms）

很少见的难以触发click事件

触摸事件

踪触摸的属性

touches：表示当前跟踪的触摸操作的touch对象的数组

当一个手指在触屏上时，event.touches.length=1

当两个手指在触屏上时，event.touches.length=2，以此类推

changedTouches：导致触摸事件被触发的触摸点数组

targetTouches：特定于事件目标的touch对象数组

9.6.2.Zepto的选择器、方法、事件完成移动特效制作

Zepto概述

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库

Zepto是专门为现代智能手机浏览器推出的JavaScript框架

设计目的是提供jQuery类似的API触摸屏的事件

Zepto框架下载

www.zeptojs.cn网站上通过点击Download打开下载页面

下载的zepto文件只要包括core、Ajax、Event、Form、IE这些模块。其中并没有包括Effects和Touch模块。所以后续在使用zepto的这些功能的时候还需要添加相关的插件或重新下载完整版的zepto

Zepto和jQuery的区别

针对移动端程序，Zepto有一些基本的触摸事件可以用来做触摸屏交互，Zepto是不支持IE浏览器的

Dom操作的区别：添加id时jQuery不会生效而Zepto会生效

事件触发的区别：使用jQuery时load事件的处理函数不会执行；使用Zepto时load事件的处理函数会执行

事件委托的区别

width()和height()的区别

Zepto由盒模型(box-sizing)决定，用.width()返回包含border等的结果，用.css('width')返回赋值width的结果

jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)

offset()的区别

Zepto返回{top,left,width,height}

jQuery返回{top,left}

Zepto无法获取隐藏元素宽高，jQuery 可以

Zepto中没有为原型定义extend方法而jQuery有

Zepto的each方法只能遍历数组，不能遍历JSON对象

9.6.3.Zepto的transform来制作动画

通过www.zeptojs.cn网站下载的默认核心文件Zepto在这里就不能使用，为什么？

默认的zepto文件不包括Effects和Touch模块

通过访问github地址：https://github.com/madrobby/zepto下载到所需要的完整zepto文件

9.6.4.Zepto的触摸事件和插件来完成动画特效

Touch

tap ：元素被触摸的时候触发

singleTap and doubleTap：这一对事件可以用来检测元素上的单击和双击

longTap：当一个元素被按住超过750ms触发

swipe、swipeLeft、swipeRight、swipeUp、swipeDown：当元素被划过时触发