javascript - 有没有办法让双击事件在带有 Vanilla JavaScript 的手机中工作?

标签 javascript events

当我切换设备工具栏时,我意识到我的双击事件不起作用。
我用谷歌搜索,但我只看到了 jQuery 的东西,我对 jQuery 一无所知。我该如何进行这项工作?

stuff.addEventListener('dblclick', openOtherStuff)
我正在尝试使用此事件打开一个模式。在电脑上完美运行,在手机上无法运行。

最佳答案

不幸的是,您无法收听双击事件,但您可以使用 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>

关于javascript - 有没有办法让双击事件在带有 Vanilla JavaScript 的手机中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65870889/

相关文章:

javascript - 带有错误事件的管道

c# - 在 C# 中,为什么我不能传递另一个类的 EventHandler 引用,我该如何绕过它?

javascript - 物理学中的著名旋转

javascript - 在鼠标悬停时重新排列文本/字母

javascript - 递归地跟踪带有最终值的嵌套对象键

javascript - Google Closure EventTarget 如何运作?

javascript - 确定 html 标签的内容何时更改

javascript - png 在 Firefox/IE 中显示,但在 chrome 中不显示

javascript - 动态创建时如何将 select 的值绑定(bind)到输入

c# - C# 中的事件处理 - 无回调