How to use FastClick.js with Phonegap and JQM?

Asked 8/11, 2013 at 0:43 Answered 13/2, 2015 at 20:20

Solved jquery performance cordova delay fastclick.js

I've tried a few different ways to remove the 300ms delay due to the webkit browsers handling of touch events. The library, FastClick.js, seems to be the preferred method, yet I'm having a little trouble implementing it. I've included it and also added an event listener, but I don't know if I've added the listener correctly. Should this be working or am I failing to do something? Thank you!

Consider the code below, where

<!DOCTYPE html>
<html>
<head>
    <title>
        Calculator
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-   scale=1.0, user-scalable=no;">
    <meta charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="phonegap.js">
    </script>
    <<script type='application/javascript' src='js/fastclick.js'></script>
    <script type="text/javascript">

    function onBodyLoad()
    {       
        document.addEventListener("deviceready", onDeviceReady, false);
         $(function() {
         FastClick.attach(document.body);
         });

    }

    function onDeviceReady()
    {


    }
    </script>
    <script>
                window.addEventListener('load', function() {
                new FastClick(document.body);
                }, false);
    </script>

    <link rel="stylesheet" href="./css/jquerymobile.css" type="text/css">
    <link rel="stylesheet" href="./css/jquerymobile.nativedroid.css" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
</head>

<body onload="onBodyLoad()">
    <!--START OF PAGE 1-->
    <div data-role="page" data-theme='b' id="one">
        <div data-role="content">
              <a href="#one" data-transition="none" data-
        </div>
    </div>
</body>

Lacedaemonian answered 8/11, 2013 at 0:43 Comment(2)

Another good one (which i use on my projects) is Hammer.js . – Janniejanos 8/11, 2013 at 0:46

I definitely recommend Hammer.js to anyone who is using Phonegap. – Johnnyjohnnycake 10/7, 2014 at 8:29

Try with the below code.

function onBodyLoad()
{       
    document.addEventListener("deviceready", onDeviceReady, false);

}

function onDeviceReady()
{
  alert('test');
  FastClick.attach(document.body);
}

If everything is fine, you should be able to see the alert box.

Have a look on http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html

Tartaglia answered 8/11, 2013 at 12:8 Comment(2)

Thank you,! I'll try both of your solutions and report back. I can think of a few questions already, but I'll see if I can find the answers first. One more question, suppose FastClick is included and instatiated correctly, do I need to add any classes or code to my buttons, anchors, or links or is this already handled in the background? – Lacedaemonian 8/11, 2013 at 15:19

I believe nothing else is required. The above link explains well. – Tartaglia 8/11, 2013 at 16:7

I can also think of another solution.. Note: I have not personally tried this..

$(document).on('pageinit', '.ui-page', function (event, data)
{
   FastClick.attach(activePage);
});

Tartaglia answered 8/11, 2013 at 12:12 Comment(2)

Would you add this to function onDeviceReady() just as you did FastClick.attach(document.body);? – Lacedaemonian 8/11, 2013 at 15:20

Not necessarily. You can have that separately inside jquery document ready.. That should work.. – Tartaglia 8/11, 2013 at 16:7

You should use the built in vclick event in jQuery Mobile - same idea as FastClick.

$(document).on('vclick', '#someButton', function(){ 

});

Source: How to use FastClick with jQuery Mobile the right way?

Alverson answered 13/2, 2015 at 20:20 Comment(0)

Recommended topics

Hot tags