无法使用removeEventListener()从元素中删除处理程序

Question

我已向“删除”按钮添加了“单击”事件侦听器。

deleteButton.addEventListener("click", deleteNote);

此事件监听器在触发时会调用以下函数：

let deleteEnabled = false; // global variable

const deleteNote = function () {
  deleteEnabled = !deleteEnabled;
  const noteElements = document.querySelectorAll(".note");

  const setDeleteBorder = function (e) {
    e.target.style.border = "5px solid red";
    e.target.style.borderRadius = "10px";
    e.target.style.cursor = "pointer";
  };

  if (deleteEnabled) {
    noteElements.forEach((el) => {
      el.addEventListener("mouseenter", (e) => setDeleteBorder(e));
      el.addEventListener("mouseleave", (e) => {
        e.target.style.border = "";
        e.target.style.borderRadius = "";
      });
    });
  } else if (!deleteEnabled) {
    noteElements.forEach((el) =>
      el.removeEventListener("mouseenter", (e) => setDeleteBorder(e))
    );
  }
};

该函数有效，并将同时将

mouseenter

和

mouseleave

事件侦听器添加到元素数组中，但是当再次按下

deleteButton

时，

mouseenter

不会被

removeEventListener

删除。

起初我以为这是全局变量未正确切换的问题，但在检查控制台时我发现正在添加多个事件侦听器，并且

removeEventListener

没有删除其中任何一个。

这可能是什么原因造成的？这可能是与

this

指向错误元素有关的问题吗？还是我对

removeEventListener

有什么误解？

到目前为止，我已经尝试使用

console.log()

来验证

deleteEnabled

变量的值，我还使用

addEventListener

和

removeEventListener

与全局范围内的另一个元素进行了测试，并且我已成功删除该测试中的事件侦听器。我还尝试重命名与事件侦听器一起使用的处理程序。到目前为止我尝试过的任何方法都不起作用，当我按下按钮时，相同的事件处理程序不断添加到元素顶部。

Answer 1

问题是，当您使用以下方法在循环内添加事件侦听器时 匿名函数，

现在使用更新版本，它可以完美工作。

let deleteEnabled = false;

// Define the event listener outside deleteNote function
const setDeleteBorder = function (e) {
  e.target.style.border = "5px solid red";
  e.target.style.borderRadius = "10px";
  e.target.style.cursor = "pointer";
};

const removeDeleteBorder = function (e) {
  e.target.style.border = "";
  e.target.style.borderRadius = "";
};

const deleteNote = function () {
  deleteEnabled = !deleteEnabled;
  const noteElements = document.querySelectorAll(".note");

  if (deleteEnabled) {
    noteElements.forEach((el) => {
      el.addEventListener("mouseenter", setDeleteBorder);
      el.addEventListener("mouseleave", removeDeleteBorder);
    });
  } else {
    noteElements.forEach((el) => {
      el.removeEventListener("mouseenter", setDeleteBorder);
      el.removeEventListener("mouseleave", removeDeleteBorder);
    });
  }
};

const deleteButton = document.getElementById("deleteButton");
deleteButton.addEventListener("click", deleteNote);

.note {
          width: 100px;
          height: 100px;
          background-color: yellow;
          margin: 10px;
        }

<div class="note">Note 1</div>
<div class="note">Note 2</div>
<div class="note">Note 3</div>
<button id="deleteButton">Delete</button>