为了账号安全,请及时绑定邮箱和手机立即绑定

这是一段移动端的代码 求大神给讲解一下JS是怎么实现触摸事件的

这是一段移动端的代码 求大神给讲解一下JS是怎么实现触摸事件的

不告诉你ID 2016-08-24 16:40:57
<!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>点触事件</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>
查看完整描述

2 回答

?
化龙贝

TA贡献191条经验 获得超79个赞

三个事件:touchstart, touchmove, touchend

查看完整回答
1 反对 回复 2016-08-29
  • 2 回答
  • 0 关注
  • 2689 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信