By

Contents
  1. 1. 手机触屏的事件
    1. 1.1. 事件的类型
    2. 1.2. 事件的对象
    3. 1.3. touch 的对象
    4. 1.4. click延时
    5. 1.5. 手势的分装 –zepto.js

手机触屏的事件

code block:

事件驱动着页面的变化

事件的类型

1.touchstart: 手指触摸屏幕时触发
2.touchmove: 手指在屏幕上移动时触发
3.touchend: 手指离开屏幕时触发

事件的对象

  • touches: 位于屏幕上的所有手指的列表
  • targetTouches: 位于该元素上的所有手指的列表
  • changedTouches：touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点
    注：没有对比出touches同targetTouches的差异，推荐使用targetTouches

touch 的对象

  • clientX/Y手指相对 layout viewport的水平/垂直像素距离
  • pageX/Y手指相对于layout viewport的水平/垂直像素距离（包含滚动）
  • screenX/Y手指相对于layout viewport的水平/垂直像素距离（包含滚动）

target手指最初与屏幕接触时的元素
移动开发通常会设置，这时这三对坐标值是完全一样的。

click延时

早期移动设备浏览器网页时内容非常小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断是单击还是双击。用触屏事件可以解决这个问题。

手势的分装 –zepto.js

手机上的jq

zeptojs为我们封装了常的触屏事件，需要touch模块支持，默认没有构建此模，我们可以自定义构建。
1.安装Nodejs环境
2.下载zepto.js
3.解压缩
4.cmd命令行进入解压缩后的目录
5.执行npm install 命令
这个make是在我们的这个源代码的目录下的一个文件。
6.编辑make文件，添加自定义模块（只要把我们想要的这个模块名字加进去就可以了）并保存

1
modules = (env['MODULES']||'zepto event ajax form ').split(' ')

7.然后执行命令 npm run-script dist
这个时候在我们的这个源码的目录之下就会出现一个目录这个目录就是dist.
8查看目录dist即构建好的zepto.js
注：关于命令行的使用
cd 切换目录
dir 查看当前目录
e: 切换到e盘
f: 切换到f盘
先切换盘符再使用cd目录

Contents
  1. 1. 手机触屏的事件
    1. 1.1. 事件的类型
    2. 1.2. 事件的对象
    3. 1.3. touch 的对象
    4. 1.4. click延时
    5. 1.5. 手势的分装 –zepto.js