pc端与移动端的事件总结

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 body{
 margin: 0px;
 }
 #test,#test1,#test2,#test3,#test4{
 position:absolute;
 cursor:pointer;
 }
 #test{
 width:300px;
 height:300px;
 background:goldenrod;
 }
 #test1{
 width:200px;
 height:200px;
 background:#a5a5a5;
 }
 #test2{
 width:150px;
 height:150px;
 background:yellowgreen;
 }
 #test3{
 width:100px;
 height:100px;
 background:red;
 }
 #test4{
 width:50px;
 height:50px;
 background:blue;
 }
 </style>
 </head>
 <body>
 <div id="test" >
 </div>
 <div id="test1">1
 </div>
 <div id="test2" >2
 </div>
 <div id="test3" >3
 </div>
 <div id="test4" >4
 </div>
 </body>
</html>
<script>
 window.onload=function(){
 //电脑端测试一二
 var test1=document.getElementById("test1");
 var test2=document.getElementById("test2");
//  测试一
    test1.onmousedown=function(ev){
      var this_=this;
            ev.preventDefault();
      var startX=ev.pageX-this_.offsetLeft;
      var startY=ev.pageY-this_.offsetTop;
      document.onmousemove=function(ev){
          this_.style.left=(ev.pageX-startX)+"px";
        this_.style.top=(ev.pageY-startY)+"px";
    }
     document.onmouseup=function(){
   document.onmousemove=null;
   document.onmousedown=null;
   document.onmouseup=null;
    }
 }
//    测试二
    test2.addEventListener("mousedown",m_mousedown,false);
    function m_mousedown(ev){
      var this_=this;
          ev.preventDefault();
    var startX=ev.pageX-this_.offsetLeft;
    var startY=ev.pageY-this_.offsetTop;
    document.onmousemove=function(ev){
      this_.style.left=(ev.pageX-startX)+"px";
      this_.style.top=(ev.pageY-startY)+"px";
    }
     document.onmouseup=function(){
   document.onmousemove=null;
   document.onmousedown=null;
   document.onmouseup=null;
    }
   }
 //移动端测试一二
// 测试1
 test3.addEventListener('touchstart',touchstart1,false);
 var startX;
 var startY;
 function touchstart1(event){
  var this_=this;
          event.preventDefault();
  var ev=event.touches[0];
  startX=ev.pageX-this_.offsetLeft;
          startY=ev.pageY-this_.offsetTop;
          document.addEventListener('touchmove',touchmove1, false);
  document.addEventListener('touchend', touchend1, false);
 }
 function touchmove1(){
   event.preventDefault();
   var ev = event.touches[0];
   event.target.style.left=(ev.pageX-startX)+"px";
   event.target.style.top=(ev.pageY-startY)+"px";
 }
 function touchend1(){
 event.target.removeEventListener('touchmove', touchmove1, false);
     event.target.removeEventListener('touchend', touchend1, false);
 }
//  测试2 
 drag_moblie(test4);
   function drag_moblie(obj){
    obj.addEventListener('touchstart',touchstart1,false);
   var startX;
 var startY;
 function touchstart1(event){
  var this_=this;
          event.preventDefault();
  var ev=event.touches[0];
  startX=ev.pageX-this_.offsetLeft;
          startY=ev.pageY-this_.offsetTop;
          document.addEventListener('touchmove',touchmove1, false);
  document.addEventListener('touchend', touchend1, false);
 }
 function touchmove1(){
   event.preventDefault();
   var ev = event.touches[0];
   event.target.style.left=(ev.pageX-startX)+"px";
   event.target.style.top=(ev.pageY-startY)+"px";
 }
 function touchend1(){
 event.target.removeEventListener('touchmove', touchmove1, false);
     event.target.removeEventListener('touchend', touchend1, false);
 }
   }
   drag_moblie(test);
   test.addEventListener("mousedown",m_mousedown,false);
 }
</script>