移动端与dblclick（双击事件）功能类似的事件是什么？如何模拟？

你目前的写法无法生效是因为移动端 touch 系列事件的e.detail属性不会像鼠标事件那样自动累计点击次数，所以判断e.detail == 2的逻辑在触摸场景下不会触发。

可以通过手动记录两次触摸的时间差来实现双击判定，行业通用的双击判定时间间隔为300ms以内，你可以根据业务需求自行调整阈值，示例代码如下：

// 存储上一次触摸的时间戳
let lastTouchTime = 0
// 双击判定的最大时间间隔，单位为毫秒
const DOUBLE_TAP_THRESHOLD = 300

window.ontouchstart = (e) => {
  const currentTouchTime = Date.now()
  const timeGap = currentTouchTime - lastTouchTime
  
  if (timeGap < DOUBLE_TAP_THRESHOLD && timeGap > 0) {
    // 符合双击条件，这里写你的双击触发逻辑
    console.log("双击事件触发")
    // 重置时间戳，避免连续多击重复触发双击
    lastTouchTime = 0
    // 如果需要阻止浏览器默认的双击缩放、文本选中等行为，可取消下面这行的注释
    // e.preventDefault()
  } else {
    // 不符合双击条件，更新上次触摸时间戳
    lastTouchTime = currentTouchTime
  }
}

注意事项 #

• 如果业务中同时需要监听单击事件，建议给单击逻辑加对应延迟，避免双击触发时同时执行两次单击逻辑
• 如果要完全禁用浏览器默认的双击缩放行为，除了加e.preventDefault()外，还需要在页面头部的meta viewport标签中设置user-scalable=no

内容的提问来源于stack exchange，提问作者God of all wars