동일한 요소에 대한 Vue3 더블 클릭 이벤트가 클릭 이벤트 문제에 영향을 미침

프로젝트 시나리오:

프로젝트 시나리오: 클릭하여 선택하고 두 번 클릭하여 편집하는 기능을 레이블에 구현해야 합니다.

---

문제 설명

문제 설명: dblclick 및 click 이벤트가 동일한 요소에서 실행될 때 dblclick은 클릭을 실행하고 두 번 호출합니다.

---

 

해결책:

딜레이어를 사용하여 더블 클릭과 싱글 클릭 이벤트를 구분 1회 클릭으로 딜레이어를 설정하여 지정된 시간 이내 클릭하면 더블 클릭으로 판단하고, 지정된 시간을 초과하면 싱글 클릭으로 판단합니다. 최소 지연 시간은 300ms이며, 300ms 미만이면 지연기가 적용되지 않습니다. (더블클릭 이벤트를 완료하는 가장 빠른 시간은 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)
  }
  // 需要执行的逻辑代码...
}