Question

I’m having a very similar problem to iPad/iPhone hover problem causes the user to double click a link where a user tapping a link has to tap twice to actually go to it.

I implemented the solution in that question, but I have a new problem now. The redirection happens when the user taps a link, but it happens no matter what. So even if the user is trying to scroll the page, and they start the scroll on a link, the page redirects when they let go of the scroll.

Is there a way to keep the links so that they only need one tap, but if they’re scrolling, don’t redirect the page?

Answer 1

Here’s what I ended up doing:

The problem is that touchstart and touchend only know about touch events, not scroll events, so they only react to starting the touch and ending the touch. What we have to do is distinguish between scrolling and not scrolling. Here’s what I did:

$('a')
    .live('touchstart', function(){
        isScrolling = false;
    })
    .live('touchmove', function(e){
        isScrolling = true;
    })
    .live('touchend', function(e){
        if( !isScrolling )
        {
            window.location = $(this).attr('href');
        }
    });

This does these things in order:

1. When touch is first recorded, set isScrolling to false.
2. When touch is moved, set isScrolling to true. This will not happen if the touch doesn’t move.
3. When touch is stopped, if scrolling has not happened, redirect the page to the link’s href.

Edit: A while after this, I discovered the problem was being caused by SuperFish. Disabling superfish when the page was under a certain width solved the problem.