移动web开发第三天（触摸事件和点击事件）

1.触摸事件

触摸事件使用函数：

//获取鼠标位置
 obj.addEventListener('touchstart',function(e){
            startY=e.touches[0].clientY;
    })
    
    //得到移动距离，并开始移动
    obj.addEventListener('touchmove',function(e){
            // console.log(2);
            moveY=e.touches[0].clientY;
            distanceY=moveY-startY;

            addTransition(boxchild);
            if((currentY+distanceY)minDistance-100)
            setTranslateY(boxchild,currentY+distanceY);


    })
    
    //保留当前位置的信息
    parentbox.addEventListener('touchend',function(e){7
            // console.log(3);
            if(currentY+distanceY>maxDistance){
                currentY=maxDistance;
            }else if(currentY+distanceY

2.兼容事件

   /*定义公用的方法*/
    var addTransition = function(obj){
        obj.style.webkitTransition = "all .2s";
        obj.style.transition = "all .2s";
    }
    var removeTransition = function(obj){
        obj.style.webkitTransition = "none";
        obj.style.transition = "none";
    }
    var setTranslateY = function(obj,y){
        obj.style.webkitTransform = "translateY("+y+"px)";
        obj.style.transform = "translateY("+y+"px)";
    }

2.点击事件

注意：移动端点击事件可以使用click事件和自定义事件。

2.1 click事件和自定义事件的区别

click事件的延迟时间大于300ms,自定义事件小于150ms

示例代码：

click事件

dom.onclick=function(){

//添加事件发生时候的代码
}

自定义事件（tap）

var hp={}；
/*封装tap*/
hp.tap = function(dom,callback){
    /*
     * 要求  没有触发 touchmove 事件
     *       并且响应速度要比click快
     */
  if(dom && typeof  dom == 'object'){
    var isMove = false;
    var startTime = 0;

    dom.addEventListener('touchstart',function(e){
      //console.log('touchstart');
      console.time('tap');/*记录tap这个参数现在的时间*/
      startTime = Date.now();
    });
    dom.addEventListener('touchmove',function(e){
      //console.log('touchmove');
      isMove = true;

    });
    dom.addEventListener('touchend',function(e){
      //console.log('touchend');
     /* //console.timeEnd('tap')/*//*!*打印tap这个参数距离上一次记录的时候的时间*!/!*!/!*!/*/
        /*判读  是否满足tap 的要求  一般要求tap的响应时间150*/
      if(!isMove && (Date.now()-startTime) < 150){
          /*调用 callback*/
        callback && callback(e);
      }
        /*重置 参数*/
      isMove = false;
      startTime = 0;
    });
  }
}