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.
