0

This is a Hammer.js issue that does not happen in desktop browsers. I have verified this in a WIP Android app that utilizes WebView

EDIT: I have also verified this happens on the "Internet" browser (not Chrome) that comes with Android (4.4.2 if that helps).

Given the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Test</title>

    <script type="text/javascript" language="Javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript" language="Javascript" src="hammer.js"></script>

    <style type="text/css">
        #wrap { position:fixed; top:0px; bottom:0px; left:0px; right:0px; background:#00f; color:#fff; font-size:24px; text-align:center; }
        #wrap a, #wrap a:visited { color:#fff; }
    </style>
</head>
<body>
    <div id="wrap">
        <a href="http://www.stackoverflow.com/">Stack Overflow</a>
    </div>
    <script type="text/javascript" language="Javascript">
        var hammerobj = new Hammer ($('#wrap')[0]);
    </script>
</body>
</html>

When I try clicking the link in my app, sometimes it goes to the link, sometimes it doesn't. It seems entirely random, but there's probably a timeout of some sort that Hammer.js uses to determine whether or not to accept the "tap".

Removing the "var hammerobj..." line so it's just HTML (no Javascript) obviously makes the link work fine on all devices at all times. It's a Hammer.js issue.

My question is:

Does anyone know how to fix the above code to allow all link clicks, form submits, etc. to fire each and every time, while still allowing me to use Hammer.js for panning, swiping, etc?

Thanks!

Improve this question

1 Answer 1

Reset to default
1

I've managed to solve the problem myself. Apparently a bug in my code caused the 300ms tap delay to stick around and prevented several clicks.

In case anyone is reading and is curious, the 300ms tap delay exists on devices so the browser can determine if you're double tapping. There are several Javascript libraries available to remove it. I personally use FastClick from https://github.com/ftlabs/fastclick.

<script type="text/javascript" language="Javascript" src="fastclick.js"></script>
<script type="text/javascript" language="Javascript">
    FastClick.attach (document.body);
</script>

Hope it helps someone!

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.