skip to Main Content

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?

2

Answers


  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>
    Login or Signup to reply.
  2. iOS Safari often handles touch events differently from other browsers. It may have its own handling for double-tap zoom or other gestures. So try other method .

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search