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>
打印出的内容为：
