Enter your search

Making mobile web apps feel faster

By
Using TouchStart events for speed

The new GoSquared Analytics Dashboard running on iOS on iPhone 5 - responsive design with touchstart events in action

Interacting with mobile web apps often feels sluggish and slow, but our phones are more than capable of handing the applications.

When you touch a button, you expect it to perform its action immediately. However, a click event listener will only trigger when the touch finishes (touchend), rather than when it begins (touchstart). This delays every action unnecessarily.

TouchStart to the rescue

The easy solution, then, is to bind all your click events to touchstart too.

Oops, we’ve just made every event trigger twice on touch devices. The solution is also simple, storing a property on the event object to check if it’s already been triggered. Luckily, the event object is the same across both triggers, otherwise things would be a lot more difficult.

Quick Example

Old code

 

$('.my-button').on('click', function(e) {
    doSomething();
});

 

New Code

 

$('.my-button').on('click touchstart', function(e) {
    if (e.handled) return;

    e.handled = true;
    doSomething();
});

 

Summary

Easy, right? At GoSquared we’ve made sure we use this solution in as many places as possible, especially our new menubar in GoSquared Beta. Apply for early access!

Note: don’t add the touchstart listener to very important buttons, such as account settings, as if the user starts scrolling down with their finger over the button, it’ll trigger when they don’t expect it.

Written by
Lead developer at GoSquared for integrations, partnerships and the API. Works on pretty much everything.

You May Also Like

Group 5 Created with Sketch. Group 11 Created with Sketch. CLOSE ICON Created with Sketch. icon-microphone Group 9 Created with Sketch. CLOSE ICON Created with Sketch. SEARCH ICON Created with Sketch. Group 4 Created with Sketch. Path Created with Sketch. Group 5 Created with Sketch.