Preventing Additional Touches In Webapp

I'm having a problem with the swipe code on my webapp. Using a single finger, the swiping between pages works flawlessly, however, when I touch with a second finger and move it at

Solution 1:

For having better control on the Touch Events, jQuery Mobile can be a good option.

http://jquerymobile.com/

Solution 2:

Each finger triggers 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 guess you start to get the idea of how to track the first finger now. The question would be: When two fingers are moving, how to tell which touchmove is which finger? The answer is the identifier property under a Touch object (the object you use for getting pageX and pageY).

So when the first finger down, record it's identifier. For upcoming touch events, iterate through targetTouches (or just changeTouches) and find the Touch object with the same identifier. If such Touch object doesn't exist in changeTouches, we do nothing. We don't care about other Touch objects.

In the end, you need to think about how you would like to handle the first finger's up. When the first finger is lifted while there are other fingers on the screen, does the second finger take over the first finger's power to scroll? Do we need to lift all fingers off the screen in order to reset the first finger's power? It's up to you.