Web App on Safari for iPad: Cancel touchstart on touchmove

This might seem like a simple solution, but I am kinda of a n00b when it comes to this touch stuff on the iPad.

I understand the concept of what I need to do, I just don't know the syntax.

Problem: I have a page full of DIV's. These DIV's are wrapped in an iScroll4 wrapper. The iScroll script is set up nicely where if you were to start scrolling the page by tapping and moving a link, the link would never fire.

I, however, am not that good. Because I set up some jQuery code to animate one of the DIV's on "touchstart" but the problem is that even if I scroll or drag my finger, the animation fires even when I don't want it to.

I need to set a time out or cancel the touchstart. Or fire the animation on touchend, but cancel the touch if 开发者_运维百科you drag your finger x amount of pixels and turn that touch into a touchmove.

Does anyone know how to do that? Thanks in advance!

Alex

EDIT: Here is my current jQuery code. I need to cancel the animation function from firing if I drag my finger X amount of pixels. Probably using pageX and pageY?

    $('tr#recent').live("touchend click", function () {
        $(".modalWindow").css('display', 'block').animate({
                height:716,
                top:15,
                left:15,
                width:995
            }, 300);            
    });

Here is how Yahoo does it with their Scrollview: http://developer.yahoo.com/yui/3/examples/scrollview/scrollview.html

var content = scrollView.get("contentBox"); 

content.delegate("click", function(e) {
    // Prevent links from navigating as part of a scroll gesture
    if (Math.abs(scrollView.lastScrolledAmt) > 2) {
        e.preventDefault();
        Y.log("Link behavior suppressed.")
    }
}, "a");

See how they are checking the "lastscrolled" amount and then canceling the link behavior if you drag your finger a certain distance.....But I am not using Scrollview....

If you want to stop the default event from firing then you need to cancel it. Have a read of the jQuery event object, especially event.preventDefault() and event.stopPropagation(). Another trick is to add false to the end of the function, so...

$( 'div' ).bind( 'touchstart', function(e)
{
    // do some funky stuff

    return false; // this'll cancel the default behaviour of the event
});

Usually, if you want to do some more stuff, you'd add another bind for 'touchmove' to get the X and Y of the movement.