jQuery Mobile: Removing 300ms click delay

jQuery Mobile adds a 300ms delay to clicks to be able to detect double clicks. 300ms is not long, but influences the user experience. If your application does not make use of double clicks, you can reduce or completely remove this delay (in case you missed this when performing the initial app development).

A good jQuery plugin to do this is jquery.mobile.fastButtons.js available at
http://www.jqueryscript.net/mobile/jQuery-Plugin-For-Removing-The-300ms-Delay-On-Mobile-Device-fastButtons.html

The plugin is easy to install and uses an approach to replace the click events with vclick events which are faster applied. The plugin is also very lightweight. So just a small overhead in loading and only replaces the default click handler.

To enable the plugin, simply download the file, place it in your application and include the script file after the jQuery and jQuery Mobile libraries. For example:

  <script src="js/lib/jquery-1.10.2.min.js"></script>
  <script src="js/lib/mobile/jquery.mobile-1.4.0.min.js"></script>
  <script src="js/lib/jquery.mobile.fastButtons.js"></script>

Other approaches, such as the fastbutton plugin add a layer div or span on top of your application and try to estimate the element visually present under this layer. This is done by pixel calculations with a small deviation. It works fine for static elements not located close to other elements. But for example, if your header contains an icon close to the screens border to open a sliding panel, the click behaviour can be completely messed up du to this deviation.

Leave a Comment