Tap event only works when finger doesnt slide

Question

I am using jquery mobile with phone gap on IOS and i notice that the tap event is trigger only when you tap the screen without moving your finger left or right. Below is my bind code.

$(".pic-cont").on("tap",{count: "not needed"},function(event){
        console.log("Clicked");
        ....

I am making a game and the user will tap things on the screen quickly and what i notice is when you tap fast your finger may slide and not register the tap event. Is there any other event i can use (like a touchdown event) so when a users finger hits the screen the event is registered right away regardless if they move finger left right up down or hold.

Thanks!

Answer 1

In case of jQuery Mobile there are few solutions, but one will work in your case.

Solution 1 - jQuery solution

Instead of tap event you should use touchstart event. It works like tap and at the same time it is a first event to trigger during the screen swipe.

Here a code example:

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('touchstart', '#index', function(){       
        alert('touchstart');
    });
});

And I made you a working example: http://jsfiddle.net/Gajotres/vDqdD/

Solution 2 - jQuery Mobile solution

While touchstart is a good all around solution, it wont work on older Android devices using older jQuery Mobile versions (1.1 and below).

So if you need to create a bulletproof version you should use vmousedown event instead of touchstart.

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('vmousedown', '#index', function(){       
        alert('vmousedown');
    });
});

And here's a working jsFiddle example: http://jsfiddle.net/Gajotres/vDqdD/4/

Answer 2

For a game it would be better to use the native touch events: https://developer.mozilla.org/en-US/docs/DOM/Touch_events. Using them allows you to have a much tighter control than using the convenience events such as "tap".