Vue 单击 事件,和双击事件,冲突,请教

我在DOM 绑了 单击 事件,还有 双击事件
下面这样写还是有点冲突。 当操作过快时,请教有什么更完美的 方案

/ 单击td
let timer: any = null
function inputFocus(event: any) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    if (editState) return
    // 非编辑状态 点击则全选 input
    if (event.target.nodeName != 'TD') return
    sDOM = eDOM = endTd.value = startTd.value = event.target
    const inputDOM = (event.target as HTMLTableCellElement).children[0] as HTMLInputElement
    inputDOM.classList.add('input-focus')
    inputDOM.focus()
    inputDOM.select() // 输入自动 覆盖 原 input的内容
    document.removeEventListener('keydown', tdKeydown)  //绑定新事件函数前用removeEventListener移除上次的事件函数即可
    document.addEventListener('keydown', tdKeydown)
  }, 300);
}
// 双击 td 进入编辑状态
function cellEdit(event: any) {
  if (editState) return // 假如已经是编辑状态
  const inputDOM = (event.target as HTMLTableCellElement).children[0] as HTMLInputElement
  inputDOM.classList.remove('input-focus')
  inputDOM.style.pointerEvents = 'auto'
  cellRange.weight = '1px'
  nextTick(() => {
    inputDOM.focus()
    inputDOM.selectionStart = 300
  })
  // console.log(cellEdit, 2, inputDOM);
  editState = true
  clearTimeout(timer)
}

你 单击 事件设置的延时触发时间太小了吧, 设置600试试
测试事件延时时间300不行, 要设置600才可以

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
</head>
<body>

<input type="button" value="aaaaaaa" onclick="clickfunc();" ondblclick="dblclickfunc();" />
<script type="text/javascript">
let timer = null
function clickfunc() {
  clearTimeout(timer)
  timer = setTimeout(() => {
      console.log("click");
  }, 600);
}

function dblclickfunc() {
    clearTimeout(timer)
    console.log("dblclick");
}

</script>

</body>
</html>

如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

img

用节流的方式呗 一定时间内只执行一个操作 就不会有冲突了

300毫秒是个分界线,超过300毫秒是单机事件

只能在点击一次按钮后判断后面还有没操作了

防抖?

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632