移动设备上的三次点击检测

Question

我正试图在特雷弗项目的网站上实现一个类似于三次点击逃生的功能。它可以在笔记本电脑和带鼠标的台式机上完美工作。然而，我在检测移动浏览器上的三次点击时遇到了问题，因为在前两次点击之后，移动浏览器会将其注册为双击并放大，而不会注册三次点击。我尝试过preventDefault((和setTimeout((的各种实现，但似乎都不起作用。我花了几个小时在谷歌上搜索并尝试不同的修复方法，但都不起作用。

在你回答之前，我知道在CSS中禁用双击缩放touch-action: manipulation，但这在较新版本的Safari iOS中不起作用，我需要它来支持所有浏览器。

以下是代码的样子，没有我尝试过的任何方法来解决这个问题。点击部分有效，只是点击版本无效。

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");
}
});

我很绝望，有人能补救吗？

Answer 1

为了保持所有事件的原样，我建议不要使用或更改它们，只计算点击/点击次数，如果用户在第三次点击中花费太长时间，则重新设置。代码如下所示：

let numberOfClicks = 0;
//just to show in screen
const clicksText = document.getElementById("clicks");
function secondsResetClick(seconds){
setTimeout(function(){
numberOfClicks = 0;
},seconds*1000)
}
//This is for click, but it would work in any listener
window.addEventListener('click', function () {
numberOfClicks += 1;
clicksText.textContent = numberOfClicks;
if (numberOfClicks === 3) {
numberOfClicks = 0;
clicksText.textContent = 'Third Click!';
}else if(numberOfClicks == 2){
// Define the seconds to wait
secondsResetClick(1);
}
//Just to show this example

});

<span id="clicks">0</span>