移动端-单点触碰和多点触碰 

单点触碰：
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:

posted on 2017-04-08 00:40  周裕涛  阅读(700)  评论(0)    收藏  举报

导航