04.触屏事件

事件类型

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)执行,判断用单是否要双击。用触屏事件可以解决这个问题

手势封装

04.触屏事件_第1张图片

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

 

你可能感兴趣的:(04.触屏事件)