事件类型
touchstart: 手指触摸屏幕时触发
touchmove: 手指在屏幕上移动时触发
touchend: 手指离开屏幕时触发
TouchEvent对象
touches: 位于屏幕上的所有手指的列表
targetTouches: 位于该元素上的所有手指的列表
changedTouches:touchstart时包含刚与触摸屏接触的触点,touchend时包含离开触摸屏的触点
注:没有对比出touches同targetTouches的差异,推荐使用targetTouches
Touch对象
clientX/Y 手指相对于layout viewport的水平/垂直像素距离
pageX/Y 手指相对于layout viewport的水平/垂直像素距离(含滚动)
screenX/Y 手指相对于layout viewport的水平/垂直像素距离(含滚动)
(未设置viewport时,screenX/Y在Webview中不正确)
target 手指最初与屏幕接触时的元素
移动开发通常会设置,这时这三对坐标值是完全一样的。
click延时
早期移动设备浏览器网页时内容非常小,为了增强用户体验,苹果公司专门为移动设备设计了双击放大的功能,确保用户可以非常方便的放大网页内容,但是当用户单击一个按钮时,移动设备会延时(约300ms)执行,判断用单是否要双击。用触屏事件可以解决这个问题
手势封装
1、tap检测接触和离开屏幕的距离来实现
2、drag跟踪手指移动位置,进而设置元素定位坐标
3、swipe 判断手指滑动的方向
zepto.js
zeptojs为我们封装了常的触屏事件,需要touch模块支持,默认没有构建此模,我们可以自定义构建。
1、安装Nodejs环境
2、下载zepto.js
3、解压缩
4、cmd命令行进入解压缩后的目录
5、执行npm install 命令
6、编辑make文件,添加自定义模块并保存,如下图
7、然后执行命令 npm run-script dist
8、查看目录dist即构建好的zepto.js