Home/ Questions/Q 8855309
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T14:06:23+00:00

How do you remove the click/tap delay from mobile Safari on iOS? I have

  • 0

How do you remove the click/tap delay from mobile Safari on iOS?

I have fiddled around with event listeners quite a bit, and have used a bunch of different scripts (such as Lightning Touch) to no joy. There are a few solutions which would have worked, however these types of scripts force you to code a destination element to every link on the DOM. This unfortunately could cause some fast and some slow transitions, which won’t work for me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I finally found the answer to my speed woes after tireless searching, and it comes in the form of FastClick (this thread goes into great detail, along with some tweaks in the comments from other users).

    Incorporate the FastClick.js script, add the onLoad listener, and wrap your <body> content in a span, and your app should start feeling much more native.

    onLoad Listener: <body onLoad="initFastButtons();">

    Span Wrap:

    <body onLoad="initFastButtons();">
    <span id="fastclick">

    [...]

    </span>
</body>

    FastClick.js

    //======================================================== FASTCLICK
         function FastButton(element, handler) {
            this.element = element;
            this.handler = handler;
            element.addEventListener('touchstart', this, false);
         };
         FastButton.prototype.handleEvent = function(event) {
            switch (event.type) {
               case 'touchstart': this.onTouchStart(event); break;
               case 'touchmove': this.onTouchMove(event); break;
               case 'touchend': this.onClick(event); break;
               case 'click': this.onClick(event); break;
            }
         };
         FastButton.prototype.onTouchStart = function(event) {

event.stopPropagation();
            this.element.addEventListener('touchend', this, false);
            document.body.addEventListener('touchmove', this, false);
            this.startX = event.touches[0].clientX;
            this.startY = event.touches[0].clientY;
 isMoving = false;
         };
         FastButton.prototype.onTouchMove = function(event) {
            if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
               this.reset();
            }
         };
         FastButton.prototype.onClick = function(event) {
            this.reset();
            this.handler(event);
            if(event.type == 'touchend') {
               preventGhostClick(this.startX, this.startY);
            }
         };
         FastButton.prototype.reset = function() {
            this.element.removeEventListener('touchend', this, false);
            document.body.removeEventListener('touchmove', this, false);
         };
         function preventGhostClick(x, y) {
            coordinates.push(x, y);
            window.setTimeout(gpop, 2500);
         };
         function gpop() {
            coordinates.splice(0, 2);
         };
         function gonClick(event) {
            for(var i = 0; i < coordinates.length; i += 2) {
               var x = coordinates[i];
               var y = coordinates[i + 1];
               if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
                  event.stopPropagation();
                  event.preventDefault();
               }
            }
         };
         document.addEventListener('click', gonClick, true);
         var coordinates = [];
         function initFastButtons() {
 new FastButton(document.getElementById("fastclick"), goSomewhere);
         };
         function goSomewhere() {
 var theTarget = document.elementFromPoint(this.startX, this.startY);
 if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;

 var theEvent = document.createEvent('MouseEvents');
 theEvent.initEvent('click', true, true);
 theTarget.dispatchEvent(theEvent);
         };
//========================================================
    • 0