移动端的touch事件

touch事件

像touch的中文意思（触摸）一样，网页在移动端为了响应用户的行为，也有一个类似于滑动的事件 touch–>触摸事件

1. touch事件中的三大函数

方法	功能
touchstart	当手指触摸屏幕的时候触发
touchmove	当手指在屏幕上滑动是触发
touchend	当手指移开屏幕的时候触发

样式：

<style>
	.box {
	  height: 200px;
	  width: 200px;
	  background-color: '#06f';
	}
</style>	

代码测试：

var box = document.querySelector('.box');
box.addEventListener('touchstart',function(){
	console.log('触摸了');
});
box.addEventListener('touchmove',function(){
	console.log('移动了');
});
box.addEventListener('touchend',function(){
	console.log('结束了');
});

2. touch事件中的事件属性

每一个touch事件过程都有事件属性

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

其实里面最常见的属性就是下面表格的这些

属性	说明
changedTouches	改变后触摸点的集合
targetTouches	当前元素的触摸点集合
touches	页面上所有触摸点的集合

另外可以看到每一个集合都指向TouchList这个对象，这个对象就是指现在你有几根手指头在摸着屏幕（脚趾头也说不定）

3. 测试不同触摸条件下触摸属性的变化

1. 触摸时 touchstart
   
2. 触摸过程中和当触摸时上面上个属性变化相同，这里省略
3. 离开 touchend
   

4. TouchList里面有什么

这时候可以看到事件的属性对象的"0"key值中保存着多个与页面定位相关的属性值

属性	说明
clientY	触摸点距离视口顶端的距离
pageY	触摸点距离页面顶端的距离（视口）
screenY	触摸点距离屏幕顶端的距离

clientY(X)和pageY(X)是相同的，额screenY(X)则比前两者要大，因为他是距离显示屏顶端的距离

有了这些知识铺垫就可以做利用坐标来做移动端的滑动效果了