PhoneGap Tips

Demos: Click Delay

Try this example in your iOS or Android web browser. Tap the logo and a small animation will play. Below the logo you will see the time between the touchend event and when the click (or tap) event fires. Note that this is an extremely simplistic way of eliminating the tap delay. Libraries like fastclick are a more robust way of handling touch events. Read more about compensating for tap delay.

Default click behavior (with delay)

Tap the HTML5 logo!

 

HTML

<a id="tap-delay"
  class="html5logo"
  href="javascript:void(0);"></a>

CSS

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}
.pulse {
  -webkit-animation: pulse 400ms;
}
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale3d(0.9,0,9,1); }
  20% { -webkit-transform: scale3d(1.1,1.1,1); }
  40% { -webkit-transform: scale3d(0.95,0.95,1); }
  70% { -webkit-transform: scale3d(1.05,1.05,1); }
  100% { -webkit-transform: scale3d(1,1,1); }
}

JavaScript

$('#tap-delay').click(function() {
  var $self = $(this);
  $self.one('webkitAnimationEnd', function() {
    $self.removeClass('pulse');
  }).addClass('pulse');
});

Custom tap event (without delay)

Tap the HTML5 logo!

 

HTML

<a id="no-tap-delay"
  class="html5logo"
  href="javascript:void(0);"></a>

CSS

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}
.pulse {
  -webkit-animation: pulse 400ms;
}
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale3d(0.9,0,9,1); }
  20% { -webkit-transform: scale3d(1.1,1.1,1); }
  40% { -webkit-transform: scale3d(0.95,0.95,1); }
  70% { -webkit-transform: scale3d(1.05,1.05,1); }
  100% { -webkit-transform: scale3d(1,1,1); }
}

JavaScript

$.event.special.tap = {
  setup: function() {
    var self = this,
      $self = $(self);

    $self.on('touchstart', function(startEvent) {
      var target = startEvent.target;

      $self.one('touchend', function(endEvent) {
        if (target == endEvent.target) {
          $.event.simulate('tap', self, endEvent);
        }
      });
    });
  }
};

$('#no-tap-delay').on('tap', function() {
  var $self = $(this);
  $self.one('webkitAnimationEnd', function() {
    $self.removeClass('pulse');
  }).addClass('pulse');
});