时间戳

首页 > 解决方案 > element.addEventListener 触发多次

javascript - element.addEventListener 触发多次

问题描述

我尝试调试我发现的唯一一件事是每次父函数执行添加更多事件侦听器时:(

我认为第 46-69 行有问题。这是codepen链接：

https://codepen.io/disaladamsas/pen/NWvXNGd?editors=0011

const cancelDeletion = (element) => {
  toggleBackdrop();
  deleteModalConfirmation.classList.remove("visible");
};
const confirmDeletion = (element) => {
  toggleBackdrop();
  element.remove();
  deleteModalConfirmation.classList.remove("visible");
};

const deleteMovieModal = (element) => {
  toggleBackdrop();
  deleteModalConfirmation.classList.add("visible");
  cancelDeletionElement.addEventListener(
    "click",
    cancelDeletion.bind(this, element)
  );
  confirmDeletionElement.addEventListener(
    "click",
    confirmDeletion.bind(this, element)
  );
};

标签： javascriptdom

解决方案

这可能是因为每次deleteMovieModal运行时，您都会注册一个新的事件侦听器，因此当它第一次运行时您添加一个事件侦听器，而当它第二次运行时您有两个事件侦听器，等等。

使用removeEventListener删除它们或使用addEventListener('something', someCallback, { once: true })

推荐阅读