Preventing extra bindings in Webapp

I have a problem with swipe code on my webapp. Using one finger scrolling between pages works flawlessly, however when I touch with a second finger and move it at the same time as the first, the app gets confused about which finger to listen to. This usually leads to errors. How can I ensure that the only touch events that the application applies to are the ones that fire on the first finger touch?

The code for my plugin plugins looks like this:

(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);

      

+3


source to share


2 answers


For better control over Touch events, jQuery Mobile might be a good option.



http://jquerymobile.com/

+1


source


Each finger fires its own touch events. So:

// 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.

      

I think you are starting to figure out how to track the first finger now. The question will be this: when two fingers move, how to determine which touchmove

- which finger? The answer is a property identifier

on an object Touch

(the object you use to get pageX

and pageY

).



So, when the first thumb is down, write it down identifier

. For upcoming touch events, go through targetTouches

(or just changeTouches

) and find an object Touch

with the same identifier

. If such Touch

an object does not exist in changeTouches

, we do nothing. We don't need other objects Touch

.

Ultimately, you need to think about how you want to handle the first finger. When the first finger is lifted, when other fingers appear on the screen, does the second finger take over the force of the first finger to scroll? Do I need to remove all fingers from the screen to reset the power of the first finger? It depends on you.

0


source







All Articles