Verhindern von zusätzlichen Problemen in Webapp

Question

Ich habe ein Problem mit dem Swipe-Code auf meiner Webanwendung. Mit nur einem Finger funktioniert das Wischen zwischen den Seiten einwandfrei, wenn ich jedoch mit einem zweiten Finger berühre und ihn gleichzeitig mit dem ersten berühre, wird die App verwirrt, welcher Finger man hören soll. Dies führt im Allgemeinen dazu, dass Dinge sehr falsch laufen. Wie kann ich sicherstellen, dass die Touch-Ereignisse, die die App berücksichtigt, nur von der ersten Berührung mit dem Finger ausgelöst werden?

Der Code für meine Swipe-Plugin wie folgt aussieht:

(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

Für eine bessere Kontrolle über die Touch-Events mit, jQuery Mobile eine gute Option sein kann.

http://jquerymobile.com/

Answer 2

Jeder Finger löst seine eigenen Touch-Ereignisse. Also:

Ich denke, Sie fangen an, die Idee zu bekommen, wie man den ersten Finger jetzt spürt. Die Frage wäre: Wenn zwei Finger sich bewegen, wie kann man sagen, welcher touchmove welcher Finger ist? Die Antwort ist die identifier Eigenschaft unter einem Touch Objekt (das Objekt, das Sie verwenden, um pageX und pageY zu erhalten).

Also, wenn der erste Finger nach unten, notieren Sie es identifier. Bei anstehenden Berührungsereignissen durchlaufen Sie targetTouches (oder nur changeTouches) und suchen Sie das Objekt Touch mit derselben identifier. Wenn ein solches Touch Objekt nicht in changeTouches existiert, machen wir nichts. Andere Touch Objekte interessieren uns nicht.

Am Ende müssen Sie darüber nachdenken, wie Sie mit dem ersten Finger nach oben gehen möchten. Wenn der erste Finger angehoben wird, während andere Finger auf dem Bildschirm sind, übernimmt der zweite Finger die Kraft des ersten Fingers, um zu scrollen? Müssen wir alle Finger vom Bildschirm nehmen, um die Kraft des ersten Fingers zurückzusetzen? Es liegt an dir.