Vue3 double-click event on the same element affects the click event problem

Project scenario:

Project scenario: the function of clicking to select and double-clicking to edit needs to be implemented on a label

---

Problem Description

Description of the problem: When dblclick and click events are executed on the same element, dblclick executes a click and calls it twice

---

 

solution:

Use a delayer to distinguish double-click and single-click events. Click once to set a delayer. Clicking within a specified time is judged as a double-click, and if it exceeds the specified time, it is a single click. The minimum delay time is 300ms, and the delayer will not take effect if it is less than 300ms. (The fastest time to complete a double-click event is 300ms?)

// 单击tag
const handleClick = () => {
  if (state.timer) {
    clearTimeout(state.timer)
  }
  // 设置延时器 超过300ms为单击 300ms内点击则为双击事件
  tag.timer = setTimeout(() => {
    // 需要执行的逻辑代码...
  },300)
}
// 双击tag
const handleDbClick = () => {
  if (state.timer) {
    // 清除延时器
    clearTimeout(state.timer)
  }
  // 需要执行的逻辑代码...
}