满口金牙 2022-07-04 16:09 采纳率: 91.5%
浏览 676
已结题

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)
}
  • 写回答

6条回答 默认 最新

  • 关注

    你 单击 事件设置的延时触发时间太小了吧, 设置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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(5条)

报告相同问题?

问题事件

  • 系统已结题 7月17日
  • 已采纳回答 7月9日
  • 创建了问题 7月4日

悬赏问题

  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输