浅谈touch事件

触摸事件：用户手指放在屏幕上面的时候，在屏幕上滑动的时候或者是屏幕上移开的时候触发；
主要的事件有：
touchstart事件：当手指触摸屏幕的时候触发， 及时 有一个手指放在屏幕上也会触发；
touchmove事件：当手指在屏幕上滑动的时候触发，是一个持续的过程，在触发事件的过程中 可以调用preventDefult（)方法阻止滚动；
touchend事件： 当手指从屏幕上移开的时候触发；
touchcancel事件：当系统停止跟踪触摸的时候触发， 比如 来电话 或者短信 或者其他的提醒的时候 会打断touchmove事件；

这些事件都会冒泡，也都可以取消，

每个触摸事件的event对象都提供了鼠标常见的属性：
bubbles（起泡类型的类型）；cancelable（是否用preventDefault（）方法可以取消与事件关联的默认事件）；
触摸事件的event对象的几个重要的属性：
touches： 保存当前屏幕上的手指对象（当前跟踪的触摸操作的touch对象的数组）；
targetTouches：保存当前绑定元素上的手指对象；（事件目标的touc对象的数组）；
changeTouches：保存状态改变的手指的对象；

Paste_Image.png

注：移动端绑定事件不允许使用on的方法，必须使用addEventlistener 监听事件

手指在屏幕上触摸， 会产生TouchEvent对象，触摸点的信息会保存在targetTouches这个属性中，如果多点触摸，则这个属性会存放多个Touch对象，每一个Touch对象都代表一个触摸点信息；

demo ：
当触发touchstart事件的时候 出现一个红色的圆 触发touchmove事件的时候 跟随鼠标移动， 触发touchend的时候 圆消失；

下面为大家介绍一个手势事件库：
百度云手势事件库： 实现了WebAPP在触屏设备上的手势识别与事件管理功能。

file:///C:/Users/Administrator/Desktop/day-7/touch.code.baidu.com-master/index0.html

语法：

 touch.on('.div','tap',function(e){//参数;  参数1  选择器  参数2  事件的名称  参数  事件处理函数
        console.log(e);
})

百度touch.js 事件类型： tap（轻拍） doubletap（双击） hold（长按） swipe（滑动）swipeleft（左滑） swiperight （右滑） swipeup（上滑） swipedown（下滑） rotate （旋转） pinch（缩放） pinchin（向内） pinchout（向外）

Paste_Image.png

未完待续......