I changed @ecmanaut javascript solution to do two things.
- I use modernizr, so it will put the .touch css class in the html node, so I can detect touch screens instead of using user agent detection. Perhaps there is a modern-less approach, but I don't know that.
- I separate each "click" so that they happen separately, if you click once, it will click once, if you quickly press the button / trigger, it will count several times.
- some minor changes to the formatting of the code, I prefer each var to be defined separately, etc., it’s more like me than anything else, I suppose you could just return it, nothing bad will happen.
I believe that these modifications do it better, because you can increase the counter 1,2,3,4 instead of 2,4,6,8
here is the modified code:
// jQuery no-double-tap-zoom plugin // Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy! // // chris.thomas@antimatter-studios.com: I modified this to // use modernizr and the html.touch detection and also to stop counting two // clicks at once, but count each click separately. (function($) { $.fn.nodoubletapzoom = function() { if($("html.touch").length == 0) return; $(this).bind('touchstart', function preventZoom(e){ var t2 = e.timeStamp; var t1 = $(this).data('lastTouch') || t2; var dt = t2 - t1; var 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'); }); }; })(jQuery);
Apply nodoubletapzoom () to the body tag, like this
$("body").nodoubletapzoom();
your html construct should be something like this
<body> <div class="content">...your content and everything in your page</div> </body>
Then in your javascript attach the click handlers as follows
$(".content") .on(".mydomelement","click",function(){...}) .on("button","click",function(){...}) .on("input","keyup blur",function(){...});
you can use any jquery event handler and any dom node. now you don’t have to do anything, you have to attach all your event handlers this way, I haven’t tried it differently, but this method works absolutely solidly, you can literally break the screen 10 times per second and it does not scale and does not register clicks (obviously , not 10 per second, ipad is not so fast, I mean, you can’t activate scaling)
I think this works because you attach the nozoom handler to the body and then bind all the event handlers to the ".content" node, but delegate the specific node, so jquery catches all the handlers in the last step before the event will bubble up to the body tag.
The main advantage of this solution is that you need to assign a nodoubletapzoom () handler to the body, you do it only once, and not once for each element, so it takes much less effort, effort and thinking to get everything done.
this has the added benefit that if you add content using AJAX, they will automatically have ready and pending handlers, I suppose if you want DIDNT this, then this method will not work for you, and you will have to configure it more .
I checked that this code works on ipad, it is actually beautiful, well made for @ecmanaut for the main solution!
** Changed on Saturday May 26th because I found what seems like the perfect solution with absolutely minimal effort.