待办列表confirm弹窗重复触发问题求助及修复指导

问题根源 #

每次调用addTheTask()添加新任务时，你会通过document.querySelectorAll('ul li')获取所有任务项，再给每一项重新绑定点击事件。这导致旧任务项被重复绑定多次事件监听器——比如第一个任务在添加第二个任务时会被第二次绑定点击事件，点击时就会触发两次弹窗，后续任务绑定次数依次累加，最终出现点击次数递增的异常。

解决方法 #

方法一：仅给新创建的任务绑定事件

不需要遍历所有任务，只给刚创建的listItem添加点击事件，从根源避免重复绑定：

addButton = document.getElementById('addButton');
taskInput = document.getElementById('taskInput');
taskList = document.getElementById('taskList');

function addTheTask() {
    listItem = document.createElement('li');
    listItem.textContent = taskInput.value;
    
    // 仅给新创建的li绑定点击事件
    listItem.addEventListener('click', () => {
        let question = window.confirm(`Do you really want to delete this task? '${listItem.textContent}'`)
        if (question) {
            listItem.remove();
        }
    });
    
    taskList.appendChild(listItem);
    taskInput.value = '';
}

方法二：使用事件委托（更优方案）

利用事件冒泡机制，直接给父元素taskList绑定一次事件，不需要给每个子元素单独绑定。这种方式性能更优，尤其适合动态添加元素的场景：

addButton = document.getElementById('addButton');
taskInput = document.getElementById('taskInput');
taskList = document.getElementById('taskList');

// 初始化时仅给父元素绑定一次事件
taskList.addEventListener('click', (e) => {
    // 判断点击目标是li元素
    if (e.target.tagName === 'LI') {
        let question = window.confirm(`Do you really want to delete this task? '${e.target.textContent}'`)
        if (question) {
            e.target.remove();
        }
    }
});

function addTheTask() {
    listItem = document.createElement('li');
    listItem.textContent = taskInput.value;
    taskList.appendChild(listItem);
    taskInput.value = '';
}

方法对比 #

• 方法一简单直接，适合小规模场景；
• 方法二避免了重复绑定事件，性能更好、更易维护，推荐优先使用。

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