Webappで追加のタッチを防止する

Question

Webアプリケーションでスワイプコードに問題があります。 1本の指でページ間をスワイプしても問題はありませんが、2本目の指で触れて最初のスクロールと同時に移動すると、どのアプリを聞くのか分かりません。これにより、一般的に物事は非常に間違っています。アプリが尊重している唯一のタッチイベントが、最初の指のタッチによって引き起こされるイベントであることを確認するには、どうすればよいですか？

私のスワイププラグインのコードは次のようになります。

(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のモバイルは良いオプションをすることができます。

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. 

私はあなたが最初の指を今どのように追跡するのか考え始めると思います。質問は次のようになります：2本の指が動いているとき、どの指がどの指であるのかを教えてください。答えはTouchオブジェクト（pageXとpageYを得るために使用するオブジェクト）の下のidentifierプロパティです。

だから、ときに最初に指ダウン、それはidentifierのレコード。今後のタッチイベントについては、targetTouches（またはちょうどchangeTouches）を繰り返し、identifierのTouchオブジェクトを見つけてください。そのようなTouchオブジェクトがchangeTouchesに存在しない場合は、何もしません。他のTouchオブジェクトについては気にしません。

最後に、最初の指をどのように扱いたいか考えなければなりません。画面上に他の指がある間に最初の指が離されると、2番目の指がスクロールする最初の指の力を引き継ぎますか？最初の指の力をリセットするために、すべての指を画面から持ち上げる必要がありますか？それはあなた次第です。