Vue中@dblclick双击事件在Chrome浏览器无法触发问题咨询

最高发原因：Chrome 开发者工具开启了响应式模拟模式 #

Chrome 开发者工具顶部的「移动设备模拟」（手机形状图标）开启后，浏览器会默认模拟移动端交互逻辑：双击事件会被拦截用于触发页面缩放，不会传递到上层的 Vue 事件监听。Firefox 的移动端模拟默认未启用双击缩放拦截逻辑，因此表现正常。
关闭移动设备模拟按钮即可恢复 dblclick 事件的正常触发。

次常见原因：双击判定阈值不匹配 #

Chrome 内置的双击事件判定默认时间间隔为 500ms，开启开发者工具后页面的事件响应会存在轻微性能损耗，若你两次点击的间隔刚好卡在阈值边界，可能会被识别为两次独立单击，无法触发 dblclick 事件。
可以调整系统鼠标的双击速度，或者自行实现双击逻辑规避浏览器原生判定规则，示例代码如下：

<!-- 子组件替换原@dblclick为@click -->
<div @click="handleCustomDblclick(task.id)" :class="[task.reminder ? 'reminder' : '', 'task']">
  <h3>{{ task.text }}
    <i @click.stop="$emit('delete-task', task.id)" class="fas fa-times"></i>
  </h3>
  <p>{{ task.day }}</p>
</div>

<script>
export default {
  data() {
    return {
      lastClickTimestamp: 0
    }
  },
  methods: {
    handleCustomDblclick(id) {
      const currentTime = Date.now()
      if (currentTime - this.lastClickTimestamp < 300) {
        this.$emit('toggle-reminder', id)
      }
      this.lastClickTimestamp = currentTime
    }
  }
}
</script>

其他排查方向 #

• 检查全局或父组件是否绑定了click事件的stopPropagation/preventDefault逻辑，开启开发者工具后事件执行时序的微小差异可能导致dblclick事件被提前拦截
• 确认开发者工具未开启「强制状态模拟」等会修改交互逻辑的调试选项

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