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).

jquery.nodoubletapzoom.js

// 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);

Hey johan,

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

--Thiemo

Thanks for this!

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.

Thanks for your idea, I need to port this snippet to javascript.

It dosnt seem to work?

Works great, thanks a lot!
I suggest lowering the time between the two taps because it prevents fast scrolling of the page.
200ms should be enough.

Definitely save my day. thank you so much

it is not working, i just check my iphone 7plus moblie.double tap to zoom still working on my mobile

I think it should be $(this).trigger('click') at the end, not $(this).trigger('click').trigger('click'). Otherwise, I receive 3 clicks for one double-tap.

Most modern browsers (circa 2020+) treat tap events (and wheel, and scroll, etc) as passive, which, long story short, means they're not expected to call preventDefault(), hence this extension will at best throw console errors or in most cases, simply not work.

The solution is to pass false for addEventsListeners passive property, the problem is jQuery doesn't support this via bind().

Thus, for modern uses it may be best to stick with pure JS:

document.addEventListener("touchstart", tapHandler, { passive: false }); 

var tapedTwice = false;

function tapHandler(event) {
    if (!tapedTwice) {
        tapedTwice = true;
        setTimeout(function () { tapedTwice = false; }, 300);
        return false;
    }
    event.preventDefault(); // Prevent Page Zoom.

    // Call function, etc
}

none of the previous coding seems to work///
here are magical lines that remove double-tap-to-zoom

document.addEventListener('dblclick', function(event) {
event.preventDefault();
}, { passive: false });

it removes default behavior at double click

@evelinamikhailova87 You made my day, nothing else worked, the 'dblclick' one does magic! No more double tap zoom on iOS 15 (iPadOS 15) for me! Thank you!!