**Vue, keydown 重复监听的问题请教**

Question

Vue, keydown 重复监听的问题请教

只在这写了一个 keydown 的 事件
onMounted(() => {
  window.oncontextmenu = function (e) { e.preventDefault() } 
  document.addEventListener('keydown', tdKeydown)
})


let aaxx =0
function tdKeydown(event: any) {
  console.log(aaxx++)    // 按一下 键， 这里打印执行了 n次，重新刷页面又好了
}

不在 onMounted 中 增加监听，在另一个函数中写
而且是先移除，再加，还是会出现重复监听的情况

 // 注： 这个函数会多次调用
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);
}

没明白错在哪

Answer 1

测了没问题

    let aaxx = 0
    function tdKeydown(event) {
        console.log(aaxx++)    // 按一下 键， 这里打印执行了 n次，重新刷页面又好了
    }
    var timer, editState
    // 注： 这个函数会多次调用
    function inputFocus(event) {
        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).children[0]
            inputDOM.classList.add('input-focus')
            inputDOM.focus()
            inputDOM.select() // 输入自动 覆盖 原 input的内容
            document.removeEventListener('keydown', tdKeydown)  //绑定新事件函数前用removeEventListener移除上次的事件函数即可
            document.addEventListener('keydown', tdKeydown)
        }, 300);
    }
    x.addEventListener('dblclick', inputFocus)