Is there any way to make double-click events work in phones with vanilla JavaScript?

Question

I realized my double click events don't work when I toggle the device toolbar. I googled but I've seen only jQuery stuff and I have no idea about jQuery. How do I make this work?

stuff.addEventListener('dblclick', openOtherStuff)

I am trying to open a modal with this event. it perfectly works on pc, doesn't work on mobile.

I found this quite quickly: https://stackoverflow.com/questions/27560653/jquery-on-double-click-event-dblclick-for-mobile - but I have never had to dblclick on my mobile and do not want to either — mplungjan, Jan 24 '21 at 13:11

Abdelrahman · Accepted Answer · 2021-01-24T17:08:43.067

unfortunately you can't listen for double tap event but you can measure the time difference between two single taps using touchstart event.

let lastClick = 0;
const ele = document.querySelector('div');
ele.addEventListener('touchstart', function(e) {
  e.preventDefault(); // to disable browser default zoom on double tap
  let date = new Date();
  let time = date.getTime();
  const time_between_taps = 200; // 200ms
  if (time - lastClick < time_between_taps) {
    // do stuff
    console.log("done");
  }
  lastClick = time;
})

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

div {
  width: 100px;
  height: 100px;
  background: rebeccapurple;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div>Touch</div>

Is there any way to make double-click events work in phones with vanilla JavaScript?

1 Answers1