Justin McCandless

The main thing that people jump to criticize HTML5 apps about over their native counterparts is speed. One of the easiest ways to make up this difference (and one of the obvious shortcomings of jQuery Mobile in iOS) is in click speed. By making sure your click events are firing as fast as possible, you can often cut a lot of the lag in page transitions and other events without much work. That's the idea behind this simple jQuery Mobile plugin I wrote.

Code: github.com/justinmc/jquery.mobile.fastButtons

Demo/Metrics: http://www.justinmccandless.com/demos/jquery.mobile.fastButtons/index.html

All the plugin does is remove all 'click' events on document, and reset them as 'vclick' events. Vclick is jQuery Mobile's own event that handles taps in touchscreen devices in a much nicer, and faster, way than the default web browser click event. The result is much faster buttons that respond without waiting for the 300ms delay programmed into iOS.

To use this plugin, just include it AFTER you include jQuery Mobile. That's it, all 'click' events will be reset as 'vlick' without any modifications to your code. Check out the source below, or click over to the repository on Github.

<link rel="stylesheet" href="http://gist-it.appspot.com/assets/embed.css">

<link rel="stylesheet" href="http://gist-it.appspot.com/assets/prettify/prettify.css"><div class="gister-gist">

// jquery.mobile.fastButtons.js


// Justin McCandless


// justinmccandless.com


// jQuery 1.6.4+


// jQuery Mobile 1.0.1+





// This jQuery Mobile plugin makes click events faster, especially iOS


// It does this by simply replacing 'click' events on document with 'vclick'





var fastButtons = {


        


        replace: function() {


                // copy the current click events on document


                var clickEvents = jQuery.hasData( document ) && jQuery._data( document ).events.click;


                clickEvents = jQuery.extend(true, {}, clickEvents);


                


                // remove these click events


                $(document).off('click');


        


                // reset them as vclick events


                for (var i in clickEvents) {


                        $(document).on('vclick', clickEvents[i].handler);


                }


        }


};





fastButtons.replace();

<div class="gist-meta">
    <a href="https://github.com/justinmc/jquery.mobile.fastButtons/blob/master/jquery.mobile.fastButtons.js">This Gist</a> by <a href="http://gist-it.appspot.com">gist-it</a>
    <span style="float: right; color: #369;"><a href="https://github.com/justinmc/jquery.mobile.fastButtons/raw/master/jquery.mobile.fastButtons.js">view raw</a></span>
    <span style="float: right; margin-right: 8px;">
        <a style="color: rgb(102, 102, 102);" href="https://github.com/justinmc/jquery.mobile.fastButtons/blob/master/jquery.mobile.fastButtons.js">jquery.mobile.fastButtons.js</a></span>
        <!-- Generated by: http://gist-it.appspot.com -->
</div>