web移动端轮播图之touch触摸事件

touch是移动端触摸事件，而且是一组事件

touchstart//当手指触摸屏幕时触发

touchmove//当手指在屏幕中来回滑动时候触发

touchend//当手指离开屏幕时候触发

touchcancel//当在屏幕上滑动被迫终止的时候（来电话、有消息）

利用touch相关事件实现移动端常见的滑动效果和常见手势

1.绑定事件：box.addEventListener('touchstart',function(e){});

2.e:事件对象，触摸事件对象，属性很多主要关心三个（changedTouches、targetTouches、touches）移动端特有

名字：TouchList----触摸点（一个手指触摸一个点，和屏幕的接触点的集合）的集合

changedTouches：改变后的触摸点集合

targetTouches：当前元素的触发点集合

touches：页面上所有触摸点集合

3.触摸点集合在每个事件触发时候会不会记录触发点

changedTouches：每个事件都会记录

targetTouches和touches在离开屏幕时不会记录

4.分析滑动原理：

让触摸的元素随手指滑动做位置变化

位置的改变需要手指的坐标，在每个触摸点中记录当前触摸点坐标

e.touches[0]:第一个触摸点
clientX、clientY：基于浏览器窗口（视口）

pageX、pageY:基于页面（视口）

screenX、screenY:基于屏幕