为什么创建DOM元素时会重复？Jeopardy网页游戏编辑菜单重复弹出问题

问题根源 #

核心问题是重复绑定事件监听器：

• 每次右键点击玩家姓名触发contextmenu事件时，都会给editButton新增一个click事件监听器
• 每次点击编辑按钮时，又会给inputMenu新增一个keyup事件监听器
  多次右键之后，点击一次编辑按钮就会触发多次createInputMenu，自然会弹出多个输入菜单。

修复方案 #

把事件监听器的绑定逻辑移到contextmenu回调外部，避免重复绑定：

let player1_name_edit = document.getElementById('player1-name-edit')
let editButton = document.getElementById('edit-context-menu') // Gets 'edit-context-menu' from DOM 
let inputMenu = document.getElementById('input-menu')
var cancelButton = document.getElementById('cancel-context-menu') // Gets 'cancel-context-menu' from DOM

// 编辑按钮点击事件全局只绑定一次
editButton.addEventListener('click', function() {
    createInputMenu()
})

// 输入框回车事件全局只绑定一次
inputMenu.addEventListener('keyup', function(event) {
    if(event.key === 'Enter') {
        let inputMenuValue = document.getElementById('name-input')
        player1_name_edit.innerText = inputMenuValue.value
        removeInputMenu()
    }
})

// 右键菜单逻辑仅负责呼起编辑菜单，不再重复绑定事件
player1_name_edit.addEventListener('contextmenu', function(event) {
    if(event.target == player1_name_edit) {
        event.preventDefault()
        showEditMenu()
    }
})

如果业务逻辑要求必须动态绑定事件，可以在绑定新监听器前先用removeEventListener移除旧监听器，或者使用AbortController控制监听器生命周期。

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