Vue中@mouse-down与@double-click事件失效，求排查原因

1. 核心问题：事件名书写错误 #

你代码里的@mouse-down是错误写法——Vue绑定原生DOM鼠标事件时，必须使用原生事件的标准名称：

• 鼠标按下事件应为@mousedown（对应原生mousedown事件）
• 双击事件应为@dblclick（对应原生dblclick事件）

Vue会把带短横线的非标准事件名识别为自定义事件，而非原生鼠标事件，所以自然无法触发。

2. 修正后的基础可运行代码 #

把事件名修正后，基础的鼠标按下、双击事件就能正常工作：

<script>
export default {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    onMouseDown() {
      this.counter += 1
      console.log('鼠标按下触发')
    },
    onDoubleClick() {
      this.counter = 0
      console.log('双击触发')
    }
  }
}
</script>

<template>
  <button 
    @mousedown="onMouseDown"
    @dblclick="onDoubleClick"
  >
    Greet {{ counter }}
  </button>
</template>

3. 无第三方包实现长按+双击检测 #

要区分长按、双击和单次点击，只需结合定时器与时间戳标记实现，核心逻辑如下：

• 长按：鼠标按下时启动定时器，若鼠标抬起前定时器触发，则判定为长按；提前抬起则清除定时器。
• 双击：记录两次点击的时间差，若小于设定阈值（如300ms）则判定为双击，同时屏蔽单次点击和长按逻辑。

完整实现代码：

<script>
export default {
  data() {
    return {
      counter: 0,
      pressTimer: null,
      lastClickTime: 0,
      isDoubleClick: false
    }
  },
  methods: {
    onMouseDown() {
      const now = Date.now()
      // 判断双击：两次点击间隔小于300ms
      if (now - this.lastClickTime < 300) {
        this.isDoubleClick = true
        this.handleDoubleClick()
      } else {
        this.isDoubleClick = false
        // 启动长按定时器（500ms后触发）
        this.pressTimer = setTimeout(() => {
          if (!this.isDoubleClick) this.handleLongPress()
        }, 500)
      }
      this.lastClickTime = now
    },
    onMouseUp() {
      // 鼠标抬起/离开时清除长按定时器
      if (this.pressTimer) {
        clearTimeout(this.pressTimer)
        this.pressTimer = null
        // 非双击时触发单次点击
        if (!this.isDoubleClick) this.handleSingleClick()
      }
    },
    handleSingleClick() {
      this.counter += 1
      console.log('单次点击')
    },
    handleDoubleClick() {
      this.counter = 0
      console.log('双击触发')
    },
    handleLongPress() {
      this.counter *= 2
      console.log('长按触发')
    }
  },
  beforeUnmount() {
    // 组件卸载前清除定时器，避免内存泄漏
    if (this.pressTimer) clearTimeout(this.pressTimer)
  }
}
</script>

<template>
  <button 
    @mousedown="onMouseDown"
    @mouseup="onMouseUp"
    @mouseleave="onMouseUp" <!-- 鼠标离开按钮时终止长按检测 -->
  >
    Greet {{ counter }}
  </button>
</template>

关键细节说明 #

• 绑定@mouseleave事件：确保鼠标意外离开按钮时，也能清除定时器，避免误触发长按。
• 定时器清理：组件卸载前主动清除定时器，防止内存泄漏。
• 状态标记：用isDoubleClick区分双击与其他操作，避免逻辑冲突。

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