javascript移动设备Web开发中对touch事件的封装实例(2)

// iOS 上手指多次敲击屏幕时的速度过快不会触发 click 事件
element.addEventListener( 'click', function( e ){
  if( dTapTimer ){
    clearTimeout( dTapTimer );
    dTapTimer = null;
    firstTouchEnd = true;
  }
}, false );

}

longTap事件

longTap 事件是当手指长时间按住屏幕保持不动时触发的事件。

复制代码 代码如下:

var startTx, startTy, lTapTimer;

element.addEventListener( 'touchstart', function( e ){
  if( lTapTimer ){
    clearTimeout( lTapTimer );
    lTapTimer = null;
  }

var touches = e.touches[0];

startTx = touches.clientX;
  startTy = touches.clientY;

lTapTimer = setTimeout(function(){
    console.log( 'fire long tap event' );
  }, 1000 );

e.preventDefault();
}, false );

element.addEventListener( 'touchmove', function( e ){
  var touches = e.touches[0],
    endTx = touches.clientX,
    endTy = touches.clientY;

if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){
    clearTimeout( lTapTimer );
    lTapTimer = null;
  }
}, false );

element.addEventListener( 'touchend', function( e ){
  if( lTapTimer ){
    clearTimeout( lTapTimer );
    lTapTimer = null;
  }
}, false );

swipe事件

swipe 事件是当手指在屏幕上滑动后触发的事件，根据手指滑动的方向又分为 swipeLeft (向左)、swipeRight (向右)、swipeUp (向上)、swipeDown (向下)。

复制代码 代码如下:

var isTouchMove, startTx, startTy;

element.addEventListener( 'touchstart', function( e ){
  var touches = e.touches[0];

startTx = touches.clientX;
  startTy = touches.clientY;
  isTouchMove = false;
}, false );

element.addEventListener( 'touchmove', function( e ){
  isTouchMove = true;
  e.preventDefault();
}, false );

element.addEventListener( 'touchend', function( e ){
  if( !isTouchMove ){
    return;
  }

var touches = e.changedTouches[0],
    endTx = touches.clientX,
    endTy = touches.clientY,
    distanceX = startTx - endTx
    distanceY = startTy - endTy,
    isSwipe = false;

if( Math.abs(distanceX) >= Math.abs(distanceY) ){
    if( distanceX > 20 ){
      console.log( 'fire swipe left event' );
      isSwipe = true;
    }
    else if( distanceX < -20 ){
      console.log( 'fire swipe right event' );   
      isSwipe = true;
    }
  }
  else{
    if( distanceY > 20 ){
      console.log( 'fire swipe up event' );       
      isSwipe = true;
    }
    else if( distanceY < -20 ){
      console.log( 'fire swipe down event' );        
      isSwipe = true;
    }
  }

if( isSwipe ){
    console.log( 'fire swipe event' );
  }
}, false );

上面模拟的事件都封装在 MonoEvent 中了。完整代码地址：https://github.com/chenmnkken/monoevent，需要的朋友看看吧~