Replace all click events with tap in jquery mobile to speed up

Question

Im developing a mobile application using phonegap and jquery mobile. I created the layout with data-roles etc... and in this application I have a lot of buttons like the following to go to different pages. (I don't specifically bind click events to these buttons, they just use the href for the magic).

<a data-role="button" href="#page6">
    go to page 6
</a>

The problem with these buttons is that they are incredibly slow, with the 400ms delay every1 is talking about. Is it possible to replace all events on these buttons with tap/vclick/touchstart (Whatever is best) so they respond instant? They will never have to deal with double taps or people dragreleasing...

Thanks

Answer 1

I wrote a JS utility called Lightning Touch to get rid of exactly that delay. Here's me demonstrating it (badly).

The foundation of that library is Google's fastButtons, which apparently is no longer available (or if it is, the URL has changed) but used to be available under Creative Commons license from code.google.com.

Lightning Touch triggers on touchend rather than touchstart, but I suspect you can modify it to work on touchstart without too much effort, if it doesn't work as-is for you.

In a presentation, Brian Leroux had a slide about the 400ms-ish delay issue that said "PPL HAVE SOLVED THE SHIT OUT OF THIS." He linked to a few projects that you might look at if Lightning Touch doesn't work for your situation. And if those fail you, you can try looking through this other list that he linked to in the same presentation.

Hope there's a solution in there somewhere for you. (And if Lightning Touch doesn't work, I'd love to know exactly why so I can improve it.)

Answer 2

try this library:quojs it worked perfectly for me.

here's an example of it(the touch function is pretty fast)i'm switching classes in here :

$$("#man").touch(function(){
    switchGender(true);
});

$$("#woman").touch(function(){
    switchGender(false);
});

$$(".next").touch(function(){
    nextPage();
});

Answer 3

This tiny code should help:

$("a").on("tap",function(e){
                         $(this).trigger("click");
                         e.preventDefault();
                         return false;
                         });

Put it into

$(document).on("ready",function(){

and voila!