无法使用removeEventListener()移除元素事件处理函数问题排查

你的问题核心是对removeEventListener的工作逻辑理解有误——它只能移除与添加时完全相同的函数引用，而你的代码每次调用deleteNote时都会创建新的函数实例，导致移除操作找不到匹配的监听器。

具体问题分析 #

• 每次点击Delete按钮触发deleteNote时，都会重新定义setDeleteBorder函数，这意味着每次添加的mouseenter监听器都是一个全新的箭头函数(e) => setDeleteBorder(e)
• 移除时你又传了一个新的箭头函数(e) => setDeleteBorder(e)，这两个箭头函数是不同的引用，所以removeEventListener无法识别并移除之前添加的监听器
• 另外你还遗漏了对mouseleave监听器的移除，即使修复了mouseenter的问题，mouseleave的监听器也会残留

修复后的代码 #

把事件处理函数移到deleteNote外部，保证每次使用的都是同一个函数引用：

let deleteEnabled = false; // 全局变量

// 把处理函数提到外部，确保引用唯一
const setDeleteBorder = function (e) {
  e.target.style.border = "5px solid red";
  e.target.style.borderRadius = "10px";
  e.target.style.cursor = "pointer";
};

const resetDeleteBorder = 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", resetDeleteBorder);
    });
  } else {
    noteElements.forEach((el) => {
      el.removeEventListener("mouseenter", setDeleteBorder);
      el.removeEventListener("mouseleave", resetDeleteBorder);
    });
  }
};

deleteButton.addEventListener("click", deleteNote);

额外优化建议 #

• 如果.note元素是动态生成的，建议使用事件委托，把监听器绑定到父元素上，避免重复添加/移除监听器的麻烦
• 可以用CSS类来替代直接操作style，比如定义一个.delete-mode类，通过添加/移除类来切换样式，代码更简洁易维护：

.note.delete-mode {
  border: 5px solid red;
  border-radius: 10px;
  cursor: pointer;
}

然后在JS里只需要切换类：

const deleteNote = function () {
  deleteEnabled = !deleteEnabled;
  const noteElements = document.querySelectorAll(".note");
  noteElements.forEach(el => {
    el.classList.toggle("delete-mode", deleteEnabled);
  });
};

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