时间戳

首页 > 解决方案 > 在forEach循环javascript中的任何一个元素上只添加一次事件监听器

javascript - 在forEach循环javascript中的任何一个元素上只添加一次事件监听器

问题描述

我有一个 NodeList 数组。我遍历每个 NodeList 元素并添加点击事件监听器。

var itemsList = document.querySelectorAll('.items');
itemList.forEach(item => {
   item.addEventListener('click', () => {
       console.log('clicked');
   })
})

一旦我单击了任何一个项目，我也想删除所有其他项目的事件侦听器。每个项目是否被点击都没有关系。

标签： javascripthtmldom

解决方案

要在不使用 jQuery 或任何东西的情况下直接执行此操作，并且不会过于复杂，您可以执行以下操作：

const itemsList = document.querySelectorAll('.items');

const onClick = () => {
  console.log('clicked');
  itemsList.forEach(item => {
    item.removeEventListener('click', onClick);
  });
};

itemsList.forEach(item => {
  item.addEventListener('click', onClick);
});

基本上，您保留对 click 函数的引用，并且该函数本身将从列表中的所有节点中删除。

如果你想知道哪个项目被点击了，你可以在onClick函数中添加一个参数，这将是点击事件，你可以从中获取被点击的项目，如下所示：

const itemsList = document.querySelectorAll('.items');

const onClick = event => {
  const clickedItem = event.target
  console.log('clicked on ' + clickedItem.textContent);

  itemsList.forEach(item => {
    item.removeEventListener('click', onClick);
  });
};

itemsList.forEach(item => {
  item.addEventListener('click', onClick);
});

沿着这些思路，您可以参考实际点击了哪个项目。

推荐阅读