javascript 基础之手机端相关事件-touch（详细篇）（1）

计划打乱了，又得重新制定计划，最近学习手机端想关的事件，话不多说，直接开整

最近才知道PC端和移动端各有各的事件，不能混用，所以整理了关于移动端的基础事件，本篇分为两节，介绍两个事件，分别为触摸（touch）事件和手势（gesture）事件 ,本节为第一小节

本节只介绍常用到的，不常用的暂时忽略，在模拟器下不支持用on的方式来给元素加touch事件，推荐用addEventListener方式

touch 事件

事件名称	解释
touchstart:	手指放到屏幕上时触发
touchmove:	手指在屏幕上滑动式触发
touchend:	手指离开屏幕时触发
touchcancel:	系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

触发事件	解释
touches:	当前屏幕上所有手指的列表
targetTouches:	当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches	涉及当前事件的手指的列表，尽量使用这个代替touches

它们都是一个数组，每个元素代表一个触摸点。touch对象里包含着触摸信息，主要属性如下：

属性	解释
clientX / clientY:	触摸点相对浏览器窗口的位置
pageX / pageY	触摸点相对于页面的位置
screenX / screenY:	触摸点相对于屏幕的位置
identifier:	touch对象的ID
target:	当前的DOM元素

点击详细属性解释

clientX/clienYt和pageX/pageY都代表事件发生位置对应对象的偏移量，不过区别是clientX/clientY不包括对象滚动而隐藏的偏移量，而pageX/pageY包括对象滚动而隐藏的偏移量。
移开屏幕的那个触摸点，只会包含在changedTouches列表中，而不会包含在touches 和targetTouches 列表中，所以changedTouches在项目当中会比较常用。

需要注意的是：多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart；
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放
通过meta元标签来设置。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

其实理清了，就很好理解，手机端有touch事件，当touch事件触发后，就会自动产生一个event对象，event对象里有属性列表（数组），且属性列表中都包含关于触摸的相关信息

代码示例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>touch相关属性</title>
		<style type="text/css">
			div{width: 30px;height: 30px;background: red;}
		</style>
	</head>
	<body>
		<div id="demo">	</div>
		<script type="text/javascript">
			var box = document.getElementById('demo');
			box.addEventListener('touchstart',function(e){
				console.log(e,e.touches,e.targetTouches,e.changedTouches[0].target);
			})
		</script>
	</body>
</html>