The double-click listener for the HTML element does not work on iOS version 17.5.1 and above

Question

I wrote the standard code for the double-click listener using JavaScript and Jquery. But I do not know why my code does not work for the mobile version of the site on a device with iOS 17.5.1 and higher. The web application was added to the iPhone desktop as a shortcut.

I have tried the following:

document.getElementsByTagName('body')[0].addEventListener('dblclick', function() {
    ...
});

var touchtime = 0;
$('body').on('click', function(e){
    e.preventDefault;
    if (touchtime == 0) {
        touchtime = new Date().getTime();
    } else {
        if (((new Date().getTime()) - touchtime) < 200) {
            ...
            touchtime = 0;
        } else {
            touchtime = new Date().getTime();
        }
    }
});

var tapped=false
    $('body').on("touchstart",function(e){
        if(!tapped){
            tapped = setTimeout(function(){
                tapped=null;
            }, 400);
        } else {
            clearTimeout(tapped);
            tapped=null;
            ...
        }
    });

What could be the mistake?

Answer 1

iPhones may react differently on apps you load from home screen and on the web.

Here is code I tested on iPhone 13 iOS 17.6.1

Mix and match the functions as needed

document.addEventListener('DOMContentLoaded', () => {
  let touchtime = 0;
  let tapped = false;

  // Desktop
  document.body.addEventListener('dblclick', (e) => {
    event.preventDefault();
    // double-click logic here
    console.log('Double-click detected!');
  });

  // click and touch for mobile (including iOS)
  document.body.addEventListener('click', (e) => {
    event.preventDefault();
    if (!tapped) {
      tapped = setTimeout(function() {
        tapped = null;
      }, 300); // Use a slightly longer timeout to handle slower double-taps
    } else {
      clearTimeout(tapped);
      tapped = null;
      // double-tap logic here
      console.log('Double-tap detected!');
    }
  });

  // Touch event handler for mobile devices
  document.body.addEventListener('touchstart', function(event) {
    const currentTime = new Date().getTime();
    if (touchtime === 0) {
      touchtime = currentTime;
    } else {
      if (currentTime - touchtime < 300) {
        // double-tap logic here
        console.log('Double-tap detected!');
        touchtime = 0;
      } else {
        touchtime = currentTime;
      }
    }
  });
});

<div style="height:50px;width:50px; border:1px solid black;">Click</div>