5

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

Hans Wassink
  • 2,529
  • 3
  • 30
  • 45

5 Answers5

13

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.)

ismail simsek
  • 28
  • 1
  • 4
Trott
  • 66,479
  • 23
  • 173
  • 212
  • Thanks man, especially since the question dated from weeks back :) This really worked out, and by studying your code I learned some nifty tricks along the way. tata – Hans Wassink May 08 '12 at 08:57
  • Glad it worked out. If you do end up using the utility in a production site, let me know and I'll add a link to the site in the README. – Trott May 08 '12 at 13:28
  • This is the Google Fast Buttons code - https://developers.google.com/mobile/articles/fast_buttons – Gavin Jun 10 '13 at 02:46
  • Hi @Trott I implemented the fast button library and got demo working. However when I linked to the jQuery Mobile library is started having problems such as the initially clicked link not disappearing and an "error loading page" message displaying. Any tips on getting around this? – Ben Pearce Jul 17 '13 at 20:22
  • I am also attempting to put my link inside a list element – Ben Pearce Jul 17 '13 at 20:35
  • @BenPearce I recommend submitting this as a question and not a comment. It will get more attention that way. Include your code in the question and indicate what things you've already tried to do to fix it. Moreover, rather than implementing Google Fast Buttons, I suggest you use either FTLabs's FastClick or my own LightningTouch. (Surprised jQuery Mobile doesn't already include something to get rid of the click delay, actually.) – Trott Jul 18 '13 at 15:54
  • Hi @Trott I mis-spoke in my comment. I did encounter this problem implementing Lightning Touch (not Google Fast Buttons). Stackoverflow doesn't have a Lightning Touch tag. Is there another way to alert you to the question I post? – Ben Pearce Jul 18 '13 at 19:38
  • @BenPearce After you post the question, maybe just post a link to it in a comment here? – Trott Jul 19 '13 at 03:40
3

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();
});
ali mokrani
  • 1,169
  • 1
  • 8
  • 12
2

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!

Ivan Shmidt
  • 21
  • 1
0

This plugin will help greatly 

$.fn.addTouch = function() {
    if ($.support.touch) {
            this.each(function(i,el){
                    el.addEventListener("touchstart", iPadTouchHandler, false);
                    el.addEventListener("touchmove", iPadTouchHandler, false);
                    el.addEventListener("touchend", iPadTouchHandler, false);
                    el.addEventListener("touchcancel", iPadTouchHandler, false);
            });
    }
};

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

Michael
  • 3,416
  • 1
  • 19
  • 21
  • 1
    doesn't jquery mobile expose those events (touch etc..) anyway? Not sure how this would work to replace clicks other then adding functionality instead of replacing it. – CI_Guy Apr 05 '12 at 17:29
  • Thanks for pointing this out, but this is not the answer Im looking for unfortunately.... – Hans Wassink Apr 05 '12 at 17:49
0

This script will test if the device is touch enabled and then replace click events with touchend events. It adds touch events to both links and JavaScript onclick element attributes. Script has been tested on Android, iPhone, iPad, and Windows Phone.

//jQuery doc.ready
$(function () { 
    addTouchEvents();   
});

addTouchEvents = function() {
    var isTouchDevice = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);

    if (isTouchDevice) {
        //replace link clicks with ontouchend events for more responsive UI
        $("a", "[onclick]").on("touchstart",function(e) {
            $(this).trigger("click");
            e.preventDefault();
            return false;
        });
    }
}
mbokil
  • 3,202
  • 30
  • 22