移动端触摸事件

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

1. touchstart     当手指触摸屏幕时触发事件
2. touchmove   当手指在屏幕来回滑动时触发事件
3. touchend      当手指离开屏幕时触发事件
4. touchcancel  当被迫中止滑动的时候触发（手机来电，消息弹框）

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

1. 绑定事件

   	window.onload = function(){
   		var box = document.querySelector('.box');
   		box.addEventListener('touchstart', function(){
   			consolg.log('hello');
   		})
   	}

    

2. 事件注册

   window.onload = function(){
   		var box = document.querySelector('.box');
   		//touchstart
   		box.addEventListener('touchstart', function(){
   			console.log('start');
   		})
   		//touchmove
   		box.addEventListener('touchmove', function(){
   			console.log('move');
   		})
   		//touchend
   		box.addEventListener('touchend', function(){
   			console.log('end');
   		})
   		//touchcancel
   		box.addEventListener('touchcancel', function(){
   			console.log('cancel');
   		})
   
   	}

   解释事件，当执行start事件时，我们打印出了e，也就是打印start事件

   		box.addEventListener('touchstart', function(e){
   			console.log('start');
   			console.log(e)
   		})

   打印事件如图

   

   我们主要关注以下3个点（事件对象的属性）

   

   这三点是移动端特有的，这三个都是列表或集合，也就是触摸列表或触摸集合。

   类型：TouchList-----------触摸点（一个手指就是一个触发点，相当于和屏幕接触的个数）的集合
   changedTouches----------改变后的触摸点的集合（从没有触摸到触摸，或者从一个触摸点移动到另一个触摸点）
   targetTouches-----------当元素的触摸点的集合（也就是你这个div里有多少个触摸点）
   touches-------------页面上所有触摸点的集合（就是你手机界面上所有的触摸点）
   只有触摸屏幕才知道有多少个触摸点，当手指离开了屏幕就跟本不知道有多少个触摸点，所以touches为0；
   而离开屏幕也是一种状态改变，从有触摸点到无，所以changedTouches的长度为1；targetTouches为0.

    

3. 滑动原理----->让触摸的元素随着手指的滑动做位置的改变，所以 ，为了记录位置的偏移量，我们需要知道当前触摸点的位置和一开始的触摸位置，而在触摸点中会记录每个触摸点的坐标，所以，我们只要去changedTouches，targetTouches，
   touches这三个列表里去获取触摸点的坐标即可。例如：

   		box.addEventListener('touchstart', function(e){
   			console.log('start');
   			console.log(e.touches[0])
   		})

   打印出e.touches[0]（第一个触摸点）为