移动开发-触屏事件

#触屏事件

1.事件类型

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

2.TouchEvent对象

touches: 位于屏幕上的所有手指的列表
targetTouches: 位于该元素上所有手指的列表
changedTouches: touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点

3. Touch对象

target ：手指最初与屏幕接触时的元素
clientX/Y : 手指相对于layout view的水平/垂直像素距离
pageX/Y ：手指相对于layout viewport的水平/垂直像素距离（含滚动）
screenX/Y ：手指相对于layout viewport的水平/垂直像素距离（含滚动）

移动开发通常会设置，这时这三对坐标值是完全一样的。

#zepto.js

jQuery和zepto.js有什么区别？

jquery这个框架很好用获取元素，操作dom,绑定事件，执行动画。它在PC端的市场份额非常大，但是移动端用的非常少。移动端用zepto。

zepto 是针对移动端，jQuery 是针对pc 端
zepto 与jQuery 的用法一模一样。连方法都长得一模一样。而且zepto.js针对移动端，对触屏事件有处理
zepto 比jQuery 的体积要更小。因为zepto不用考虑兼容问题，它用C3的一些特效，代码相对来说小很多。

zepto.js 定制

zepto.js 还有一个优点，zepto 有很多的方法，但是开发的时候不可能会使用所有方法。
zepto.js这些方法打散，分成多个js文件。你需要使用到哪个方法，就找到对应的zepto.js 对应的js 文件即可。

假设在页面上面使用zepto 五个zetpo模块对应的功能，我就需要导入五个不同的js 文件。
这样的话需要给服务器发送5次请求，非常损耗性能。

解决方案：使用node.js定制

定制步骤:

下载zepto.js 文件，解压
打开cmd.exe,切换到解压后的zepto.js文件夹.
使用npm install 这个命令(node自带命令)
这个命令会到这个解压的文件夹下面去读取一个叫做pakeage.json 的文件。然后下载定制需要依赖的一些模块. 执行完这一步会到当前文件夹下面生成node_modules。
npm run-script dist 运行脚本，这个命令会去读取当前文件夹下面的make 的文件。
（需要定制zepto 的哪些模块，在make 的这个文件里面进行配置。在第41行添加即可）
运行完了之后会到当前的文件夹下面生成一个dist 的文件夹，定制完成的的js 文件会在dist里面。

zepto.js 封装了一个tap 事件，触屏的时候触发.

$("div").on("tap",function(){
      console.log("触发触屏事件");
   });

zepto.js还封装了一些手势

//手势，向左滑动
  $("div").on("swipeLeft",function(){
      console.log("向左滑动.");
  });
//向右滑动.
$("div").on("swipeRight",function(){
      console.log("向右滑动.");
});

手势滑动的原理：判断distanceX=moveX-startX 的距离正负，而且distanceX要大于50才算是滑动。

扫描二维码关注公众号，回复： 4362796 查看本文章

zepto日期插件mdatetimer