dynamicEventing

Getting your clicks heard. Dynamic eventing for hybrid applications and mobile sites.

Get the code: Github Repo

A common problem developers come across when building hybrid/web apps and mobile sites is that mobile browsers take time to register javascript click events. This delays the application process, making for a more disjointed user experience.

The problem:
The problem is that mobile browsers add a 300ms delay between the time you tap and firing the event. This is because the browser is waiting to see if a double click is trying to be performed. This causes issues when your working from a single code base for both mobile and desktop.

TLDR: Get the code here : Github repo

Solution 1: Patchy browser patches.
Some mobile browsers allow us to skip the delay by setting the view port with user-scalability disabled.

If you don’t already add the following to your document head:

1
<meta name="viewport" content="width=device-width, user-scalable=no">

However, before thinking all is well, be aware that this patch only works on chrome and firefox for android. To remove the delay on windows phone add the following css:

1
2
3
4
html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

This still leaves you uncovered so…

Solution 2: Dynamic eventing
I like to keep code as simple as it can be. I like to use a more light-weight solution avoiding having to include a big library simply to get rid of the delay.

The current solution that I use is to set a dynamic event listener. Simply put it checks to see whether the client is viewing the app on mobile or desktop. If they are on mobile, the event gets registered to the ‘touchstart’ event which ensures there is no conflict with the ‘double click’. If they are browsing on desktop then they get served the regular click event.

1
2
3
4
5
6
function dynamicEvent() {

var isTouch = ("ontouchstart" in document.documentElement) ? true : false, // Check to see if client is on a touch device
event = (isTouch) ? "touchstart" : "click"; // Set event accordingly
return event;
}

This can be minified to one line:

1
2
3
4
function dynamicEvent() {
var event = ("ontouchstart" in document.documentElement) ? "touchstart" : "click";
return event;
}

Firstly we check to see if the touch start event exists, if it does then we know we are dealing with a touch device. Then we set the event to “touchend” or “click“ accordingly.

Then we set an event variable by calling dynamicEvent();

1
var _dE = dynamicEvent();

When we go to set an event we use our listener as follows:

1
item.addEventListener(_dE,function() {});

If you’re using jQuery

1
$('#item').on(_dE,function(){});

A note on External libraries.
Several libraries do exist which address the issue. The most notable of which is fastclick developed by the Financial Times, or the more full bodied hammer.js which provides greater mobile event control, however like any libraries, think before of the pro’s and con’s before blindly adding to your code base.

And there you have it, a simple light weight way to ensure your clicks get heard, no matter where your code is running.

How do you solve this problem? Are there any fantastic alternatives not mentioned? Join the discussion below.

Rory K

Rory Kermack is a professional programmer, interactive designer, and entrepreneur. Working with the #iot, #hybridapps, #webrtc & #reactjs. Senior dev & main contributor of codeanthology.