CODEWITHSUNDEEP
jqueryjquery-mobilecordova
Hans Wassink
Hans Wassink

Reputation: 2577

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

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

Upvotes: 5

Views: 25692

Answers (5)

mbokil
mbokil

Reputation: 3330

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;
        });
    }
}

Upvotes: 0

Ivan Shmidt
Ivan Shmidt

Reputation: 21

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!

Upvotes: 2

ali mokrani
ali mokrani

Reputation: 1179

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();
});

Upvotes: 3

Trott
Trott

Reputation: 70075

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

Upvotes: 13

Michael
Michael

Reputation: 3426

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/

Upvotes: 0

Related Questions