如何选中指定class内的对应id？汉诺塔开发点击事件取值异常问题

你遇到的是事件冒泡导致的目标元素指向错误：当点击子元素圆盘时，点击事件会向上冒泡触发父元素塔座的绑定事件，此时e.target指向的是实际触发点击的最内层元素（也就是圆盘），而非你绑定事件的塔座元素，因此会拿到圆盘ID而非塔座ID。

按以下两点修改核心逻辑即可解决：

• 塔座点击事件中，将e.target替换为e.currentTarget：e.currentTarget固定指向绑定事件的元素本身，不会受冒泡的子元素影响，可以准确拿到塔座的ID。
• 给圆盘的点击事件添加阻止冒泡逻辑，避免点击圆盘时误触发塔座的点击事件，覆盖已经选中的塔座数据。

另外你当前的代码还有两个隐藏问题可以同步修正：

1. 如果未先点击塔座就点击圆盘，chosenTower为空会触发removeChild报错，可补充前置判断做容错
2. removeChild只能从元素的直接父节点删除元素，你原来的逻辑里从选中的目标塔座删除圆盘是错误的，需要先取圆盘的原父节点再执行删除

const container = document.querySelector(".container")
const towers = document.querySelectorAll(".tower")
const disks = document.querySelectorAll(".disk")

let chosenDisc = ""
let chosenTower = ""

towers.forEach(choice => choice.addEventListener("click", (e) => {
    // 用currentTarget取绑定事件的塔座元素ID，不受子元素冒泡影响
    chosenTower = e.currentTarget.id
}))

disks.forEach(choices => choices.addEventListener("click", (e) => {
    // 阻止事件冒泡到父级塔座
    e.stopPropagation()
    chosenDisc = e.target
    // 容错判断：未选中目标塔座时提示
    if (!chosenTower) {
        alert('请先选择要移动到的目标塔座')
        return
    }
    // 从圆盘所在的原塔座删除元素
    const originTower = chosenDisc.parentNode
    originTower.removeChild(chosenDisc) 
    // 如果要将圆盘放到选中的目标塔座，用以下代码即可，不需要append到container
    const targetTower = document.getElementById(chosenTower)
    targetTower.appendChild(chosenDisc)
    // 移动完成后清空选中状态
    chosenDisc = ""
    chosenTower = ""
}))

内容的提问来源于stack exchange，提问作者user16910942