移动端-单点触碰和多点触碰
单点触碰：
1.监听touchstart事件，获取事件对象（e）的touches属性，然后生成一个节点(spot)，将e.touches[0]的pageX属性和pageY属性赋值给节点的left和top，然后将节点插入文档；
2.监听touchmove事件，当节点(spot)存在时，改变节点的left和top值；
3.监听touchend事件，当节点(spot)存在时，删除节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
body{
color:white;
background-color: #222;
}
.spot{
border-radius: 50px;
width: 50px;
height: 50px;
background-color: #fff;
box-shadow: 0px 0px 40px #fff;
position: absolute;
}
</style>
</head>
<body>
<script type="text/javascript">
var spot=null;
document.addEventListener("touchstart",function(e){//touchastart事件
e.preventDefault();
if(spot){
return
}
spot=document.createElement('div');
spot.classList.add('spot');
spot.style.top=(e.touches[0].pageY-35)+'px';//必须字符串拼接!
spot.style.left=(e.touches[0].pageX-35)+'px';
console.log(e.touches[0].pageY)
document.body.appendChild(spot);
}, { passive: false });//{ passive: false }用于阻止浏览器对preventDefault事件的忽略;
document.addEventListener("touchmove",function(e){
e.preventDefault();
if(spot){
spot.style.top=(e.touches[0].pageY-35)+'px';
spot.style.left=(e.touches[0].pageX-35)+'px'; } }, { passive: false })
document.addEventListener('touchend',function(e){
e.preventDefault();
if(spot){ document.body.removeChild(spot); spot=null; } })
</script>
</body>
</html>
多点触碰：
1.监听touchstart事件，获取事件对象（e）的targetTouches对象列表属性，然后遍历这个属性获得每一个touch对象，为每个touch对象生成一个节点(spot)，将touch对象的pageX属性和pageY属性赋值给节点(spot)的left和top，然后将节点(spot)插入文档；设置定时器(timer)定时根据touche变量定时改变文档(spot)的left和top属性值
2.监听touchmove事件，把事件的touches属性赋值给touches变量
3.监听touchend事件，遍历事件的changedTouches属性，获得touch对象后，如果对象相对应的节点文档存在，则删除；当changedTouches属性长度为0时，取消定时器变量timer;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
body{
color:white;
background-color: #222;
}
.spot{
border-radius: 50px;
width: 50px;
height: 50px;
background-color: #fff;
box-shadow: 0px 0px 40px #fff;
position: absolute;
/*top:-100px;
left: -100px;*/
/*-webkit-transition:all 1s;*/
}
</style>
</head>
<body>
<script type="text/javascript">
var spots={},touches,timer;
document.addEventListener("touchstart",function(e){
e.preventDefault();
[].forEach.call(e.targetTouches,function(touch){
if(spots[touch.identifier]){
return
}
var spot=spots[touch.identifier]=document.createElement('div')
spot.classList.add('spot');
spot.style.top=(touch.pageY-35)+'px';
spot.style.left=(touch.pageX-35)+'px';
console.log(touch.pageY)
document.body.appendChild(spot);
})
timer=setInterval(function(){
renderTouches(touches);
},16)
}, { passive: false });
document.addEventListener("touchmove",function(e){
e.preventDefault();
touches=e.touches;
}, { passive: false })
function renderTouches(touches){
if(!touches){
return
}
[].forEach.call(touches,function(touch){
var spot=spots[touch.identifier];
if(spot){
spot.style.top=(touch.pageY-35)+'px';
spot.style.left=(touch.pageX-35)+'px';
}
})
}
document.addEventListener('touchend',function(e){
e.preventDefault();
[].forEach.call(e.changedTouches,function(touch){
var spot=spots[touch.identifier];
if(spot){
document.body.removeChild(spot);
delete spots[touch.identifier];
}
})
if(e.changedTouches.length==0){
clearInterval(timer);
}
})
</script>
</body>
</html>
触摸事件：
touchstart:
touchmove:
touchend
触摸事件对象：
touches:当前屏幕上所有手指动作列表（TouchList列表），里面装着touch对象
targetTouches:当前DOM元素上的手指动作的TouchList列表
changedTouches:涉当前事件的手指动作的列表，在touchend事件中，这将是移开的手指;
事件对象属性：
identifier:一个数字，唯一标示触摸回话中的当前手指
target:
clientX/clientY:
pageX/pageY:
screenX/screenY:
