是否有任何方法使双击事件工作在手机上香草JavaScript?

Question

当我切换设备工具栏时，我意识到双击事件不起作用。我谷歌了一下，但我只看到jQuery的东西，我不知道jQuery。我该怎么做呢?

stuff.addEventListener('dblclick', openOtherStuff)

我正在尝试使用此事件打开一个模态。它可以在pc上完美运行，但不能在手机上运行。

Answer 1

不幸的是，你不能监听双击事件，但你可以使用touchstart事件来测量两次单次点击之间的时间差。

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>