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);
source to share
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.
source to share