Stop fast taps acting like double-tap-to-zoom

Jul 21, 2015 javascript jquery mobile

This post is more than 18 months old. Since technology changes too rapidly, this content may be out of date (but that's not always the case). Please remember to verify any technical or programming information with the current release.

I have been making a number pad on a webpage for mobile browsers - and one problem I kept running into is double tap to zoom’ing when I didn’t want it.

So, basically, people were typing too fast on the screen’s number buttons - and that would execute a zoom. Turns out, with a little bit of jQuery, you can get rid of this annoying problem.

$(body).on('touchend', '.number-keys', function(e) {
  e.preventDefault();
  e.target.click();
});

Here, you just watch for touch-end on the body, limit that to your number-keys (or any selector you want), and prevent the touch end - and instead issue a click. That way it’ll work like a standard tap and not a double-tap and zoom.

Keep in mind, it’s probably best practice to only disable this on areas that need it - not the entire body - because then you’re removing some of the usability of your page.