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);
}
没明白错在哪
测了没问题
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)
这个问题我也出现过，还没找到原因，但是知道解决办法，改成@click就不会出现了
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！