移动触摸事件、触摸坐标的使用
移动上的事件
移动端上使用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的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:当元素被划过时触发