I've been trying to incorporate a triple-tap escape feature similar to The Trevor Project's Website. It functions flawlessly on laptops and desktops with a mouse. However, I'm struggling to detect the triple tap on mobile browsers because they interpret it as a double-tap after the first two taps, causing them to zoom in and miss registering the third tap. Despite attempting various implementations involving preventDefault() and setTimeout(), I haven't found a solution. I've spent countless hours researching and testing different fixes without success.
Just so you know, I am aware of the option to disable double-tap zoom using touch-action: manipulation in CSS, but this doesn't work on newer versions of Safari iOS, and I need this feature to be universally supported across all browsers.
Below is a snippet of the code before any attempts were made to resolve the issue. The click part works fine, but the tap version does not.
window.addEventListener('click', function (event) {
if (event.detail === 3) {
window.location.replace("http://google.com");
}
});
window.addEventListener('touchstart', function (event) {
if (event.detail === 3) {
window.location.replace("http://google.com");
}
});
I'm running out of ideas, can anyone provide a solution for this problem?