05.触屏事

Posted 2021-11-27 cgwtq

事件类型

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               手指最初与屏幕接触时的元素

移动开发通常会设置<meta name="viewport" content="width=device-width, initial-scale=1">，这时这三对坐标值是完全一样的。

 

 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