Web App and touchMove events

[Fiasco1]

I have a web app of several divisions 320x460 divisions. I want to use a swipe gesture to slide through the divisions. I got this to work but there is an issue with the way I'm handling the events.

When I put my finger on the screen a touchStart event is initiated.
As I drag my finger across the screen touchMove events happen and when I lift my finger a touchEnd event happens.

The problem I am running into is when dragging your finger I want to cancel the intial "touchStart" event from triggering any time that it turns into a drag over 50 pixels long.

What is happening is that when I put my finger down on a button in the page and pause before dragging, that button gets clicked. If I don't pause after putting my finger down and quickly flick the butten gets clicked after I finish the flick. What ends up happening when I'm using drags to slide divisions in and out of view is that if I flick quickly the incoming division receives a mousedown/click event right where I started my flick on the division that is sliding out.

http://scores.warbirdsiii.com/imote/index.html

I've got these three lines in the head to trap events

document.addEventListener("touchmove", function(e){return touchMove(e);}, false);
document.addEventListener("touchstart", function(e){return touchStart(e);}, false);
document.addEventListener("touchend", function(e){return touchEnd(e);}, false);

[pinga123]

I have the same problem, can anyone help??

how can I cancel the touchstart event once touchmove event is detected?

[robbieduncan]

I don't see that you can cancel an event that happened in the past. What you could do is defer the button click (with a timer) until you can tell if it's a drag or not.

[pinga123]

Thanks for your opinion. May I know how to defer and add a timer?
Even though I know it is a drag, the touchstart event is over already if I cannot cancel it.

[robbieduncan]

Thanks for your opinion. May I know how to defer and add a timer?
Even though I know it is a drag, the touchstart event is over already if I cannot cancel it.

I'm not going to write your code for you. When you receive the first event don't do whatever it is you are doing. Instead start a timer that will call a function to perform the onClick action. If you detect a drag cancel the timer. It seems pretty simple...