Tap event triggers twice

[asangadev]

Hi there, I have two DIV layers sitting on top of each other (using cas z-index and they both visible in DOM).

The both layers have two buttons and the buttons are positioned at same X and Y.

If I “tap” on the top layer button, it will also trigger the bottom layer botton at the same time. This works perfectly fine with the 500ms delay event.

But I really want to use ths “tap” event and it feels super responsive. Could you please help/advice?

[benmajor]

Hi, could you maybe put together a jsFiddle demo or similar so that I can check? There may be a workaround for this, depending upon your markup.

[asangadev]

Thanks for the reply! 👍 I managed to fix this by doing below:

//tap delay
var tapStatus = 1;

function resetTap(delay) {
 setTimeout(function ()  {
   tapStatus = 1;
 },delay)
}

then during the tap event:

function triggerCloseButton() {
  $("#target").tap(function() {
    if(tapStatus){tapStatus=null}else{return};
    //task
    resetTap(500);
  });
}

Could you please help me to improve above solution?

[benmajor]

Thanks for sharing the fix you've managed to come up with. Could you put together a Fiddle to demonstrate your DOM structure for me?

[asangadev]

Thanks for the reply. It's bit hard to setup a DOM (the DOM creates via VUE js) structure for this. Because this renders on Phonegap in iOS 11. I will try my best to come up with a structure. Fro now, above solution works perfectly fine for me.