addEventListener在forEach循环javascript中的任何一个元素上仅出现一次

Question

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

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

当我单击任何一个项目时，我也要删除所有其他项目的事件监听器。是否单击每个项目都没有关系。

Answer 1

您可以使其更具表现力

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

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

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

Answer 2

使用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()方法