Question

Building a web application and having trouble getting a click event to fire. It works perfectly when running from a normal instance of Safari, but when running from the home screen, it fails.

$("a.applink").live('click', clickHandler);
var clickHandler = function(e) {
    console.log(e);
    e.preventDefault();
}

When running from the home screen, ‘e’ is empty. If I replace ‘click’ for ‘touchend’, it does work, but touchend doesn’t give the correct behaviour (i.e. if you happen to touch a link to start a scroll, it triggers an unexpected click).

Is there a proper solution to this?

Answer 1

Here’s how I did it:

Essentially, when you navigate a page you’re going to tap or scroll. (Well there are other things like pinch and slide put you can figure them out later)…

So on a tap your ‘touchstart’ will be followed by a ‘touchend’
On a scroll your ‘touchstart’ will be followed by a ‘touchmove’

Using Jq 1.7… on other versions you can use .bind()

function nextEvent() {
    //behaviour for end
    $(this).on('touchend', function(e){
        /* DO STUFF */
        $(this).off('touchend');
        });
    //behaviour for move
    $(this).on('touchmove', function(e){
        $(this).off('touchend');
        });     
    }

$(element).on('touchstart', this, nextEvent);

Basically, when a ‘touchstart’ happens, I bind actions to ‘touchend’ and ‘touchmove’.

‘Touchend’ does whatever I would want a tap to do and then unbinds itself
‘Touchmove’ basically does nothing except unbind ‘touchend’

This way if you tap you get action, if you scroll nothing happens but scrolling..