防止Web應用程序中的其他觸動

Question

我遇到了我的web應用程序上的滑動代碼問題。使用單個手指，頁面之間的滑動操作完美無瑕，但是，當我用第二根手指觸摸並與第一個手指同時移動時，該應用程序會對要聽哪個手指感到困惑。這通常會導致事情變得非常錯誤。我該如何確保應用程序尊重的唯一觸摸事件是由第一手指觸摸觸發的觸摸事件？

我的刷卡插件的代碼看起來是這樣的：

(function($) { 

     $.fn.movement = function(options) { 


    var defaults = { 
     threshold: { x: 150, y: 15 }, 
     mouseUp: function() {}, 
     mouseMove: function() { }, 
     mouseDown: function() { }, 
     scrollStart: function() { }, 
     scrollStop: function() { }, 
     scrollMove: function() { } 
    }; 



    var options = $.extend(defaults, options); 

    if (!this) return false; 


    //alert(this.attr("id")); 
    return this.each(function() { 

     var me = $(this) 

     // Private variables for each element 
     var originalCoord = { x: 0, y: 0 } 
     var lastCoord = {x: 0, y: 0 } 
     var finalCoord = { x: 0, y: 0 } 
     var velocity = { x: 0, y: 0 } 
     function touchMove(event) { 
       event.preventDefault(); 
       finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates 
       finalCoord.y = event.targetTouches[0].pageY 
       defaults.scrollMove(finalCoord); 
       defaults.mouseMove(finalCoord,activeDirection()); 
     } 

     function touchEnd(event) { 
      var direction = stoppedDirection(); 
      defaults.scrollStop(finalCoord); 
      defaults.mouseUp(velocity,direction);   
     } 

     function touchStart(event) { 
      originalCoord.x = event.targetTouches[0].pageX 
      originalCoord.y = event.targetTouches[0].pageY 
      lastCoord.x = originalCoord.x 
      lastCoord.y = originalCoord.y 
      finalCoord.x = originalCoord.x 
      finalCoord.y = originalCoord.y 
      defaults.scrollStart(originalCoord); 
     } 
     function activeDirection() { 
      var direction = []; 
      var vx = lastCoord.x - finalCoord.x; 
      var vy = lastCoord.y - finalCoord.y; 
      if (vy < 0 && (Math.abs(vy) > defaults.threshold.y)) 
       direction.push('down'); 
      else if (vy > 0 && (Math.abs(vy) > defaults.threshold.y)) 
       direction.push('up'); 
      if (vx < 0 && (Math.abs(vx) > defaults.threshold.x)) 
       direction.push('right'); 
      else if (vx > 0 && (Math.abs(vx) > defaults.threshold.x)) 
       direction.push('left'); 
      return direction; 
     } 

     function stoppedDirection() { 
      var direction = []; 
      velocity.x = originalCoord.x - finalCoord.x; 
      velocity.y = originalCoord.y - finalCoord.y; 
      if (velocity.y < 0 && (Math.abs(velocity.y) > defaults.threshold.y)) 
       direction.push('down'); 
      else if (velocity.y > 0 && (Math.abs(velocity.y) > defaults.threshold.y)) 
       direction.push('up'); 
      if (velocity.x < 0 && (Math.abs(velocity.x) > defaults.threshold.x)) 
       direction.push('right'); 
      else if (velocity.x > 0 && (Math.abs(velocity.x) > defaults.threshold.x)) 
       direction.push('left'); 
      return direction; 
     } 
     this.addEventListener("touchstart", touchStart, false); 
     this.addEventListener("touchmove", touchMove, false); 
     this.addEventListener("touchend", touchEnd, false); 
     this.addEventListener("touchcancel", touchCancel, false); 
     }); 
    }; 

})(jQuery); 

Answer 1

因擁有觸摸事件更好的控制，jQuery Mobile的可以是一個很好的選擇。

http://jquerymobile.com/

Answer 2

每個手指觸發自己的觸摸事件。所以：

// put first finger down 
touchstart, 
// move that finger 
touchmove, touchmove, touchmove, ... 
// put second finger down 
touchstart, 
// move both fingers 
touchmove, touchmove, touchmove, ... 
// lift either finger 
touchend, 
// lift last finger 
touchend. 

我想你開始明白如何跟蹤第一根手指了。問題是：當兩個手指在移動時，如何判斷哪個手指是哪個touchmove？答案是Touch對象（用於獲取pageX和pageY的對象）下的identifier屬性。

所以當第一根手指向下時，記錄它的identifier。對於即將發生的觸摸事件，請遍歷targetTouches（或只是changeTouches），並找到具有相同identifier的Touch對象。如果這樣的Touch對象在changeTouches中不存在，我們什麼也不做。我們不關心其他Touch對象。

最後，您需要考慮如何處理第一根手指。當第一根手指擡起而屏幕上還有其他手指時，第二根手指是否接管第一根手指的力量進行滾動？我們是否需要將所有手指從屏幕上擡起才能重置第一根手指的力量？隨你便。