<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no"/><title>點(diǎn)觸事件</title><style type="text/css">?? body{?? ??? background-color:#666;?? ??? }?? .dot{?? ??? width:60px;?? ??? height:60px;?? ??? background-color:#FFF;?? ??? border-radius:50%;?? ??? position:absolute;?? ??? }?? ?? ?</style></head><body>????? <script type="text/javascript">??????? var dotObj = null;?? ??? ?window.onload = function(){?????????? ???????????? document.addEventListener('touchstart',function(e){?????????????? e.preventDefault();?????????????? var touch = e.touches[0];?????????????? if(dotObj){????????????? ??? ?? console.log('esist');?????????????? } else{?????????????????? dotObj = document.createElement('div');?????????????????? dotObj.classList.add('dot');?????????????????? document.body.appendChild(dotObj);?????????????????? dotObj.style.left = touch.pageX-40+'px';?????????????????? dotObj.style.top = touch.pageY-40+'px';???????????????? ??????????????????? ??????????????? }?????????? ???????????? },false);??????????? document.addEventListener('touchmove',function(e){????????????????? e.preventDefault();????????????????? if(dotObj){????????????????????? var touch = e.touches[0];????????????????????? dotObj.style.left = touch.pageX-40+'px';????????????????????? dotObj.style.top = touch.pageY-40+'px';??????????????????? ?????????????????? }? ???????????? },false);??????????? document.addEventListener('touchend',function(e){?????????? ??? ?? e.preventDefault();?????????? ??? ?? if(dotObj){?????????? ??? ? ??? ?? document.body.removeChild(dotObj);?????????? ??? ? ??? ?? dotObj = null;?????????? ??? ?? }??????????? },false)?? ??? ?} ??? </script> ?? ?</body></html>
這是一段移動(dòng)端的代碼 求大神給講解一下JS是怎么實(shí)現(xiàn)觸摸事件的
不告訴你ID
2016-08-24 16:40:57
