移动端-单点触碰和多点触碰
单点触碰:
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: