javascript行動裝置Web開發中對touch事件的封裝實例_javascript技巧

在觸控螢幕裝置上，一些比較基礎的手勢都需要透過對 touch 事件進行二次封裝才能實現。
zepto 是行動端上使用率比較高的一個類別庫，但是其touch 模組模擬出來的一些事件存在一些相容性問題，如tap 事件在某些安卓裝置上存在事件穿透的bug，其他類型的事件也或多或少的存在一些相容性問題。

於是乎，乾脆自己動手對這些常用的手勢事件進行了封裝，由於沒有太多真實的設備來進行測試，可能存在一些兼容性問題，下面的代碼也只是在iOS 7、Andorid 4 上的一些比較常見的瀏覽器中測試通過。

tap事件

tap 事件相當於pc 瀏覽器中的click 效果，雖然在觸控螢幕裝置上click 事件仍然可用，但是在許多裝置上，click 會存在一些延遲，如果想要快速回應的「click」 事件，需要借助touch 事件來實現。

複製程式碼 程式碼如下:

var startTx, startTy;

var startTx, startTy;

element.addEventListener( 'touchstart', function( e ){

  var touches = e.touches[0];

  startTx = touches.clientX;

  startTy = touches.clientY;

}, false );

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

    endTx = touches.clientX,

    endTx = touches.clientX,
 
  // 在部分裝置上touch 事件比較靈敏，導致按下和鬆開手指時的事件座標會出現一點點變化
  if( Math.abs(startTx - endTx)     console.log( 'fire tap event' );

  }

}, false );

doubleTap事件

doubleTap 事件是當手指在相同位置範圍內和極短的時間內兩次敲擊螢幕時觸發的事件。在部分瀏覽器下，doubleTap 事件會選取文本，如果不希望選取文本，可以為元素新增 user-select:none 的 css 屬性。 複製程式碼

程式碼如下:

var isTouchEnd = false,
  lastTime = 0,
  lastTx = null,
  lastTy = null,
End5pirstTouch >  dTapTimer, startTx, startTy, startTime;

element.addEventListener( 'touchstart', function( e ){  if( dTapTimer ){

    clearTimeout( dTapTimer );
    clearTimeout( dTapTimer );
    clearTimeout( dTapTimer );
}   
  var touches = e.touches[0];

  startTx = touches.clientX;

  startTy = touches.clientY;  

}, false );

element.addEventListener( 'touchend', function( e ){

  var touches = e.changedTouches[0],

    endTx = touches.clientX,
    endTx = touches.clientX,
 now = Date.now(),
    duration = now - lastTime;

  // 首先確保能觸發單一的tap 事件

  if( Math.abs(startTx - endTx)     // 兩次tap 的間隔確保在500 毫秒以內
    if( duration       // 本次的tap 位置和上一次的tap 的位置允許一定範圍內的誤差
 null &&
        Math.abs(lastTx - endTx)         Math.abs(lastTy - endTy)
        firstTouchEnd = true;        lastTx = lastTy = null;

    🎜>    }
    else{
      lastTx = endTx ;
      lastTy = endTy;
    }
  }
  else{
    firstTouchEnd = true;
    lastTx = lastTy = null;
  }

  lastTime = now;
}, false );

// 在iOS 的safari 上手指敲擊螢幕的速度過快，

// 有一定的幾率會導致第二次不會響應touchstart 和touchend 事件
// 同時手指長時間的touch不會觸發click

if( ~navigator.userAgent.toLowerCase().indexOf('iphone os') ){

  body.addEventListener( 'touchstart', function( e ){

      startTime = Date.now();

  }, true );

  body.addEventListener( 'touchend', function( e ){
      var noLongTap = Date.now() - startTime

      if( firstTouchEnd ){

          firstTouchEnd = false;
             dTapTimer = setTimeout(function(){

                 🎜>                  lastTx = lastTy = null;

                    }, 400 );
          }
     true ;
      }
  }, true );

// 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 );
    clearTimeout( lTapTimer );
   

  var attempts = e.touches[0];

 startTx =touches.clientX;

 startTy =touches.clientY;

  lTapTimer = setTimeout(function(){

    console.log( '觸發長按事件' );
  }, 1000 );

  e.preventDefault();

}, false );

element.addEventListener( 'touchmove', function( e ){

  var Touches = e.touches[0],
    endTx = Touches.clientX,
  cli.
  if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){

   clearTimeout( lTapTimer );

   clearTimeout( lTapTimer );  }
}，假 );

element.addEventListener( 'touchend', function( e ){

  if( lTapTimer ){

   clearTimeout( lTapTimer );
    clearTimeout( lTapTimer );
  . ;

滑動活動

swipe 事件是當手指在螢幕上滑動後觸發的事件，根據手指滑動的方向又分為 swipeLeft (向左)、swipeRight (向右)、swipeUp (向上)、swipeDown (向下)。 >

複製程式碼

程式碼如下：var isTouchMove, startTx, start>; element.addEventListener( 'touchstart', function( e ){

  var Touchs = 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 attempts = e.changedTouches[0],
    endTx = Touches.clientX,
    endTy = Touches.clientY,
  Ty,

    isSwipe = false;

  if( Math.abs(distanceX) >= Math.abs(distanceY) ){
    if( distanceX > 20 ){
      console。 isSwipe = true;
    }
    else if( distanceX       console.log( '觸發向右滑動事件' );   

      isSwipe = true;
    }
  }
  else{
    if( distanceY > 20 ){
    if( distanceY > 20 ){
    if( distanceY > 20 ){
    if( distanceY > 20 ){
    if( distanceY > 20 ){
          
      isSwipe = true;
    }
    else if( distanceY       consoleY       console.log() '後續滑動事件;        
      isSwipe = true;
    }
  }

  if( isSwipe ){

    console.log( '觸發滑動事件' );

  }
}, false );

上面模擬的事件都封裝在MonoEvent中了。