iPad cancel double-tap zoom

by ecmanaut

HTML

<div class="box one">No events yet</div>
<div class="box two">No events yet</div>

CSS

.box {
  width: 33%;
  height: 100%;
  position: absolute;
  text-align: center;
}
.one {
  left: 0;
  background: pink;
}
.two {
  right: 0;
  background: cyan;
}

JavaScript

var IS_IOS = /iphone|ipad/i.test(navigator.userAgent)
  ;

if (IS_IOS) $('.box').bind('touchstart', preventZoom);
$('.box').click(alsoShowClicks);

function preventZoom(e) {
  var t2 = e.timeStamp
    , t1 = $(this).data('lastTouch') || t2
    , dt = t2 - t1
    , many = e.originalEvent.touches.length > 1;
  $(this).data('lastTouch', t2);
  if (many || !dt || dt > 500) return; // not-a-double-tap
  e.preventDefault(); // prevent the zoom "auto" behaviour
  $(this).html($(this).html() +'<br>'+(t2%1e5)+': prevented zoom!');
  //$(this).css('background-color', randColour());
  // finally, create two click events for the events we swallowed up
  $(this).trigger('click');
  $(this).trigger('click');
}

function alsoShowClicks(e) {
  var t = e.timeStamp;
  $(this).html($(this).html() +'<br>'+ (t % 1e5) +': click!');
  //$(this).css('color', randColour());
}

function randColour() {
  return '#' + (0x1000000 + Math.round(Math.random() * 0xFFFFFF)
                ).toString(16).slice(-6);
}