如何实现a标签触发双击事件时阻止href跳转至下一页

问题根因 #

浏览器原生点击事件的触发顺序为：mousedown → mouseup → click → 第二次mousedown → 第二次mouseup → 第二次click → dblclick。你只阻止了dblclick事件的默认行为，但第一次click事件在dblclick触发前就已经执行了跳转逻辑，所以无法达到预期效果。

实现方案 #

核心思路是拦截所有click事件的默认跳转，通过计时器判定是单击还是双击：在第一次点击后开启计时，若指定时间窗口内触发第二次点击则判定为双击，不执行跳转；若超时未触发第二次点击则判定为单击，执行跳转逻辑。

示例代码 #

HTML部分：

<a href="{location}" id="targetLink">My Link</a>

JS部分：

const link = document.getElementById('targetLink')
// 存储单击计时器实例
let clickTimer = null
// 双击判定时间阈值，单位为毫秒，默认300ms匹配系统通用双击判定间隔
const DOUBLE_CLICK_GAP = 300

link.addEventListener('click', (e) => {
  // 先拦截所有默认跳转行为
  e.preventDefault()
  if (clickTimer) {
    // 存在计时器说明是第二次点击，判定为双击
    clearTimeout(clickTimer)
    clickTimer = null
    // 此处可添加双击时的自定义业务逻辑
  } else {
    // 第一次点击，开启计时器等待二次点击判定
    clickTimer = setTimeout(() => {
      // 超时无二次点击，判定为单击，执行跳转
      window.location.href = link.href
      clickTimer = null
    }, DOUBLE_CLICK_GAP)
  }
})

注意事项 #

• 若业务场景有特殊的双击交互习惯，可自行调整DOUBLE_CLICK_GAP的数值，通常建议控制在200ms~500ms区间内，避免影响用户的单击交互体验。
• 如果该a标签还绑定了其他点击相关事件，需注意事件的注册顺序和传播逻辑，避免出现逻辑冲突。
• 如需兼容移动端触摸场景，可替换为监听touchstart/touchend事件，判定逻辑和上述代码保持一致即可。

内容的提问来源于stack exchange，提问作者Alex Navarro