public
johan / jquery.nodoubletapzoom.js
Last active

A jQuery plugin to selectively disable the iOS double-tap-to-zoom action on specific page elements (and have that generate two click events instead).

  • Download Gist
jquery.nodoubletapzoom.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 
// jQuery no-double-tap-zoom plugin
 
// Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy!
 
(function($) {
  var IS_IOS = /iphone|ipad/i.test(navigator.userAgent);
  $.fn.nodoubletapzoom = function() {
    if (IS_IOS)
      $(this).bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp
          , t1 = $(this).data('lastTouch') || t2
          , dt = t2 - t1
          , fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1) return; // not double-tap
 
        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(this).trigger('click').trigger('click');
      });
  };
})(jQuery);
Thiemo-Mueller commented

Hey johan,

thanks for the snippet!
I'd just recommend adding a "return this;" to make it chainable.

--Thiemo

john-cheesman commented

Thanks for this!

EntropyDivideByZero commented

Thank you for this. I am using the presses of the button to call a function to increment a counter. I need the double taps to call my function twice. Might it be OK for me to call $(this).trigger('click').trigger('click'); twice in the section // also synthesize click events we just swallowed up.

Thank you again.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.