JavaScript：EventListener无法仅触发一次及removeEventListener失效问题

看起来你遇到的问题是removeEventListener没生效，导致"Show More"链接能被多次点击——这其实是一个很常见的坑，核心原因是移除事件监听时必须使用和添加时完全相同的函数引用。如果你的循环里每次都创建匿名函数或者新的函数实例，removeEventListener根本找不到要移除的那个事件绑定，自然就失效了。

下面给你两种可行的解决方案：

方案一：使用命名函数实现精准绑定/解绑 #

先预定义好点击事件的处理函数，这样每次绑定的都是同一个函数引用，移除时就能精准匹配：

// 定义Show More的点击处理函数
function handleShowMoreClick(event) {
  // 第一步：移除当前元素的Show More点击监听
  event.target.removeEventListener('click', handleShowMoreClick);
  
  // 第二步：执行你的Show More核心逻辑（比如展开内容、修改DOM等）
  console.log('执行Show More展开逻辑');
  
  // 第三步：替换成新的事件监听（比如Show Less）
  event.target.textContent = 'Show Less';
  event.target.addEventListener('click', handleShowLessClick);
}

// 定义Show Less的点击处理函数
function handleShowLessClick(event) {
  // 同样的逻辑：移除当前监听，替换回Show More
  event.target.removeEventListener('click', handleShowLessClick);
  console.log('执行Show Less收起逻辑');
  event.target.textContent = 'Show More';
  event.target.addEventListener('click', handleShowMoreClick);
}

// 循环给每个Show More链接绑定初始事件
for (let i = 0; i < this.showMoreLinks.length; i++) {
  const link = this.showMoreLinks[i];
  link.addEventListener('click', handleShowMoreClick);
}

为什么之前的代码失效？ #

如果你的原代码是类似下面这样的（循环里用匿名函数），那每次绑定的都是全新的函数实例，removeEventListener找不到对应的引用，自然无法移除：

// ❌ 错误示例：匿名函数导致removeEventListener失效
for (let i = 0; i < this.showMoreLinks.length; i++) {
  this.showMoreLinks[i].addEventListener('click', function(event) {
    // 这里的匿名函数和add时的函数引用不一致，remove无效
    event.target.removeEventListener('click', this);
  });
}

方案二：用事件委托简化批量处理 #

如果你的"Show More"链接数量很多，事件委托会是更高效的选择——不用给每个链接单独绑定事件，只需要给父容器绑定一次，通过事件冒泡来处理：

// 假设所有Show More链接的父容器有个class叫"content-container"
const container = document.querySelector('.content-container');

function handleContainerClick(event) {
  const targetLink = event.target;
  // 只处理带有特定类的Show More链接
  if (!targetLink.matches('.show-more-link')) return;

  // 通过类标记链接状态，避免重复触发
  if (targetLink.classList.contains('is-expanded')) {
    // 执行Show Less逻辑
    console.log('收起内容');
    targetLink.textContent = 'Show More';
    targetLink.classList.remove('is-expanded');
  } else {
    // 执行Show More逻辑
    console.log('展开内容');
    targetLink.textContent = 'Show Less';
    targetLink.classList.add('is-expanded');
  }
}

// 给父容器绑定一次事件即可
container.addEventListener('click', handleContainerClick);

这种方式不需要手动解绑事件，通过状态类来区分当前应该执行的逻辑，从根源上避免了多次触发的问题，代码也更简洁。

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