Vue 为什么我按 delete键， 会出现4个Dom

Question

Switch 难道会循环？为什么 我按 一次 delete键， 控制台打印出4个Dom ，其中两个有些不同 ，尾部 没有 可点 方框
虽然我有 切换不同的 sDOM 和 eDOM, 但我还是没明白， 这里应该是拿到我最后切换到的， 两个 DOM吧.

function tdKeydown(event: any) {
  // 整行 整列 内容的删除
  switch (true) {
    case event.key == 'Delete' && rowColSelect.selected == false:
      const eRC = JSON.parse((eDOM as HTMLTableCellElement).getAttribute('rc') as string)
      console.log(sDOM, eDOM) //这里为什么会打印出 4个Dom
      if (sDOM == eDOM) {
        tableJson.value.body[sRC.r][computeIndex(sRC.r, sRC.c)].value = ''
        return
      }
      for (let i of tableJson.value.body) {
        for (let x of i) {
          const rc = x.rc
          if (rc.c >= sRC.c && rc.maxc <= eRC.maxc && rc.r >= sRC.r && rc.maxr <= eRC.maxr ||
            rc.c >= eRC.c && rc.maxc <= sRC.maxc && rc.r >= eRC.r && rc.maxr <= sRC.maxr ||
            rc.c >= sRC.c && rc.maxc <= eRC.maxc && rc.r >= eRC.r && rc.maxr <= sRC.maxr ||
            rc.c >= eRC.c && rc.maxc <= sRC.maxc && rc.r >= sRC.r && rc.maxr <= eRC.maxr
          ) {
            x.value = ''
          }
        }
      }
      break
    case event.key == 'Escape':
      const oldTdDOM = document.getElementById(`${sRC.r}-${sRC.c}`) as HTMLTableCellElement
      // oldDOM.blur()
      oldDOM.style.pointerEvents = 'none'
      singleCellRange(oldTdDOM, 2)
      editState = false
      break
  }

Answer 1

别用switch ,改成if else if 看看
你先确定是 switch (true) 执行了4次，还是 tdKeydown(event: any)事件函数执行了4次
如果是 tdKeydown(event: any)事件函数执行了4次,应该是对keydown事件重复绑定了多次这个tdKeydown事件函数, 这样事件触发时就会重复执行多次tdKeydown事件函数

比如

function tdKeydown() {
    console.log("执行了tdKeydown");
}
document.addEventListener("keydown", tdKeydown);
document.addEventListener("keydown", tdKeydown);

对keydown事件重复绑定了2次tdKeydown事件函数,这样按一次键就会重复执行2次tdKeydown事件函数