addEventListener二次点击触发及事件冒泡冲突问题求解

问题根源分析 #

1. 事件第二次点击才触发：你的deleteTask和getTaskInfo函数是在点击时才给元素绑定addEventListener，第一次点击只是完成了事件绑定，并没有执行事件处理逻辑；第二次点击才会触发刚绑定的事件回调。
2. 删除按钮触发查看任务事件：虽然你加了event.stopPropagation()，但因为第一次点击删除按钮时，事件绑定才完成，此时stopPropagation还没生效，所以事件会冒泡到父元素li，触发查看逻辑。

修复方案 #

方案1：事件委托（最优，适配动态生成元素） #

通过监听父容器的点击事件，根据目标元素判断操作类型，无需给每个元素单独绑定事件，性能更优。

// 页面加载完成后初始化事件监听
document.addEventListener('DOMContentLoaded', function() {
  // 替换成你的任务列表父容器ID
  const taskContainer = document.getElementById('task-list-container');
  
  taskContainer.addEventListener('click', function(event) {
    const target = event.target;
    
    // 处理删除按钮点击
    if (target.matches('.delete-btn')) { // 假设删除按钮有delete-btn类名
      event.stopPropagation(); // 立即阻止冒泡，避免触发li的事件
      const id = target.id;
      const taskAppObj = new ToDoConstructor();
      taskAppObj.removetask(id);
      return;
    }
    
    // 处理查看任务（点击li区域，排除删除按钮）
    const targetLi = target.closest('li');
    if (targetLi && !target.matches('.delete-btn')) {
      const id = targetLi.id.replace('data-', '');
      const taskAppObj = new ToDoConstructor();
      const task = window.storeContext.find(item => item.id === id);
      taskAppObj.readTheTask(task);
    }
  });
});

方案2：修改原有函数（仅适配静态元素） #

如果要保留原有函数结构，需确保事件只绑定一次，且首次点击就执行逻辑：

window.deleteTask = function deleteTask(id) {
  const deleteButton = document.getElementById(id);
  
  // 首次点击直接执行删除逻辑
  const taskAppObj = new ToDoConstructor();
  taskAppObj.removetask(id);
  
  // 定义事件处理函数，避免重复绑定
  function handleDelete(event) {
    event.stopPropagation();
    taskAppObj.removetask(id);
  }
  
  // 先移除旧事件，再绑定新事件
  deleteButton.removeEventListener('click', handleDelete);
  deleteButton.addEventListener('click', handleDelete, false);
};

window.getTaskInfo = function getTaskInfo(id) {
  const li = document.getElementById(`data-${id}`);
  
  // 首次点击直接执行查看逻辑
  const taskAppObj = new ToDoConstructor();
  const task = window.storeContext.find(item => item.id === id);
  taskAppObj.readTheTask(task);
  
  // 定义事件处理函数
  function handleRead() {
    taskAppObj.readTheTask(task);
  }
  
  // 先移除旧事件，再绑定新事件
  li.removeEventListener('click', handleRead);
  li.addEventListener('click', handleRead);
};

关键注意事项 #

• 事件委托是处理动态列表的首选方案，无需关心元素何时生成，统一监听父容器即可。
• 处理删除按钮时，event.stopPropagation()必须放在逻辑最前面，确保事件不会冒泡到父元素。

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