title: How to prevent doubletap zoom in iOS and Android
body: <p>I am building a web app using Jquery Mobile for use on a desktop, iPad and Android phone. I want the user to be able to tap a button to increment (or decrement) a value.  My code works fine on a desktop, but on the iPad and Android, when the user taps rapidly, the screen zooms instead of the value incrementing.
  I have been trying to implement the solution here: <a href="https://stackoverflow.com/questions/3103842/safari-ipad-prevent-zoom-on-double-tap">Safari iPad : prevent zoom on double-tap</a> (and in particular the refinement provided by Christopher Thomas.</p>
  
  <p>Here is my code for the button and value:</p>
  
  <pre><code>    &lt;div class="content"&gt;
          &lt;div id ="status_page" data-role="page"&gt;
              &lt;div data-role="content" data-theme="d"&gt;
                  &lt;div id="val"&gt;1&lt;/div&gt;
                  &lt;div id="but" data-role="button"&gt;Click&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my event handler for a click on the button (btw - I think the parameters in Christopher's answer were the wrong way round):</p>
  
  <pre><code>        $(".content") .on("click",$("#but"),function(){
              var but_val = parseInt($("#val").text());
              $("#val").text(but_val+1);
          });
  </code></pre>
  
  <p>...and here is the nodoubletap function:</p>
  
  <pre><code>(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 &gt; 500 || fingers &gt; 1){
              return; // not double-tap
          }
          e.preventDefault(); // double tap - prevent the zoom
          // also synthesize click events we just swallowed up
          $(this).trigger('click');
      });
  };
  })(jQuery);
  </code></pre>
  
  <p>This function is trapping the double tap correctly. However, the trigger function at the end is not working (the event is not being fired).  If I substitute <code>$(this).trigger('click');</code> with <code>$('#but').trigger('click');</code> then everything works as it should.  I want this to work for a number of different buttons, so I need to be able to trigger the event based on the object that called the touchstart event. Can anyone help me to fix this please.</p>