如何用纯JS移除循环添加的LI点击事件监听器，仅触发一次？

当然可以用纯JavaScript实现这个需求！而且有两种实用的方案，我给你一步步说明：

方案一：在事件处理函数内手动移除监听器 #

这是兼容性最好的方案，适用于所有支持addEventListener的浏览器。核心思路就是在点击事件触发后，立刻从当前LI元素上移除对应的监听器，这样后续点击就不会再触发了。

修改后的完整代码如下：

// 获取目标UL下的所有LI元素
const cardDeck = document.getElementById('listDeck').getElementsByTagName('li');

// 循环为每个LI绑定点击事件
for (let i = 0; i < cardDeck.length; i++) {
  cardDeck[i].addEventListener('click', flip, false);
}

function flip(e) {
  // 确保触发事件的元素是LI
  if (e.target && e.target.nodeName === "LI") {
    // 这里放置你的业务逻辑代码（比如你提到的firstMove相关操作）
    // 示例：console.log('首次点击LI元素:', e.target);
    
    // 关键步骤：移除当前LI的点击监听器
    e.target.removeEventListener('click', flip, false);
  }
}

注意：我把循环里的var换成了let，避免了循环变量共享导致的潜在问题——如果用var，循环结束后所有事件处理函数里的i都会指向同一个值，不过这里因为我们是直接操作cardDeck[i]，影响不大，但用let是更规范的写法。

方案二：使用addEventListener的once配置（更简洁） #

从ES2019开始，浏览器支持给addEventListener传入配置对象，其中once: true可以让事件仅触发一次，触发后浏览器会自动帮你移除监听器，不需要手动调用removeEventListener：

const cardDeck = document.getElementById('listDeck').getElementsByTagName('li');

for (let i = 0; i < cardDeck.length; i++) {
  // 通过配置once: true实现单次触发
  cardDeck[i].addEventListener('click', flip, { once: true });
}

function flip(e) {
  if (e.target && e.target.nodeName === "LI") {
    // 你的业务逻辑代码
    // ...
  }
}

这个方案代码更简洁，但要注意兼容性：IE11及更早的浏览器不支持这个配置项，如果你的项目需要兼容老浏览器，还是优先选择方案一。

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