addEventListener 只在 forEach 循环中的任何一个元素上使用一次 javascript

Question

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

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

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

Answer 1

要在没有 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 函数的引用，并且该函数本身会将自身从列表中的所有节点中删除。

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

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);
});

沿着这些路线的一些东西可以让您获得实际点击了哪个项目的参考。

Answer 2

你可以让这更具表现力

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

const updateClickListener = (list, callback, operation = 'add') => {
  itemList.forEach(item => {
    item[`${operation}EventListener`]('click', () => {
        callback();
        updateClickListener(list, () => {}, 'remove');
    })
  })
}

updateClickListener(
 list, 
 () => {
   console..log('clicked');
});

Answer 3

使用jquery非常简洁

var handler=function(){
   //your logic of click event
   alert('clicked')
}

// handle click and add class
$('.items').on("click", function(){
  handler();
  $('.items').not(this).off("click");
})

这将在点击第一个点击事件后删除所有其他点击事件。 如果要删除包括第一次单击在内的所有事件，请从我的代码中删除not()方法

Answer 4

一种方法是将侦听器添加到元素的祖先，即document + 目标检查单击了哪个元素，如果您需要删除此侦听器，则只需将其删除一次

 function handleClick(event) { if (event.target.classList.contains("items")) { alert(event.target.textContent) document.removeEventListener('click', handleClick) } } document.addEventListener('click', handleClick);

 <div id="app"> <li class="items">1</li> <li class="items">2</li> <li class="items">3</li> <li class="items">4</li> <li class="items">5</li> </div>