javascript - 当我单击一个元素时，返回多次

这是我的代码（没有CSS文件）：

var taskInput = document.getElementById("taskInput"),
  taskList = document.getElementById("taskList");

taskList.addEventListener("click", changesLi);

function addTask() {
  if (!taskInput.value) return alert("Please enter a task.");

  var li = createLi(taskInput.value);
  taskList.prepend(li);
  taskInput.value = "";
}

function createLi(title) {
  var li = document.createElement("li"),
    span = document.createElement("span"),
    div = document.createElement("div"),
    remove = document.createElement("a"),
    done = document.createElement("a"),
    doneImg = document.createElement("img"),
    removeImg = document.createElement("img");

  span.textContent = title;
  li.className = "task";
  div.className = "links";
  done.href = "#";
  done.className = "done";
  doneImg.alt = "done";
  done.appendChild(doneImg);
  remove.href = "#";
  remove.className = "remove";
  removeImg.alt = "remove";
  remove.appendChild(removeImg);
  li.appendChild(span);
  li.appendChild(div);
  div.appendChild(done);
  div.appendChild(remove);

  return li;
}

function changesLi(e) {
  if (e.target.parentElement.classList.contains("remove")) {
    e.target.parentElement.parentElement.parentElement.remove();
  }

  if (e.target.parentElement.classList.contains("done")) {
    const tasks = document.querySelectorAll(".done");
    tasks.forEach(task => {
      task.addEventListener("click", function() {
        console.log(e.target);
      });
    });
  }
}

<form class="task-form" onsubmit="event.preventDefault();addTask()">
  <input id="taskInput" placeholder="New task..." autocomplete="off" />
  <input type="submit" value="Add Task" class="submit" />
</form>
<ul id="taskList"></ul>

当我单击包含完成类的按钮时，每次e.target值都会以数组形式返回给我。
第一次单击时，什么也没有返回。第二次，它返回一次目标，第三次，两次返回目标，依此类推...
无论我搜索了多少，都没有得到任何结果。我的问题在哪里？

最佳答案

每当用户单击done按钮时，您都将向所有done按钮添加点击侦听器。添加侦听器不会替代以前的侦听器，因此，每次单击它们都会添加另一个侦听器。当他们再次单击时，它将运行所有执行console.log(e.target)的侦听器，以及运行向所有按钮添加另一个侦听器的原始侦听器。

您应该只在原始侦听器中记录所需内容，而不添加任何其他侦听器。

var taskInput = document.getElementById("taskInput"),
  taskList = document.getElementById("taskList");

taskList.addEventListener("click", changesLi);

function changesLi(e) {
  if (e.target.parentElement.classList.contains("remove")) {
    e.target.parentElement.parentElement.parentElement.remove();
  } else if (e.target.parentElement.classList.contains("done")) {
    console.log(e.target.parentElement.parentElement.parentElement.querySelector("span").textContent);
  }
}

function addTask() {
  if (!taskInput.value) return alert("Please enter a task.");

  var li = createLi(taskInput.value);
  taskList.prepend(li);
  taskInput.value = "";
}

function createLi(title) {
  var li = document.createElement("li"),
    span = document.createElement("span"),
    div = document.createElement("div"),
    remove = document.createElement("a"),
    done = document.createElement("a"),
    doneImg = document.createElement("img"),
    removeImg = document.createElement("img");

  span.textContent = title;
  li.className = "task";
  div.className = "links";
  done.href = "#";
  done.className = "done";
  doneImg.alt = "done";
  done.appendChild(doneImg);
  remove.href = "#";
  remove.className = "remove";
  removeImg.alt = "remove";
  remove.appendChild(removeImg);
  li.appendChild(span);
  li.appendChild(div);
  div.appendChild(done);
  div.appendChild(remove);

  return li;
}

<form class="task-form" onsubmit="event.preventDefault();addTask()">
  <input id="taskInput" placeholder="New task..." autocomplete="off" />
  <input type="submit" value="Add Task" class="submit" />
</form>
<ul id="taskList"></ul>

关于javascript - 当我单击一个元素时，返回多次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59402042/