addEventListener только один раз для любого элемента в forEach l oop javascript

Question

У меня есть массив NodeList. Я пропускаю oop через каждый элемент 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);
});

В основном вы сохраняете ссылку на функцию щелчка, а сама функция удаляет сам из всех узлов в списке.

Если вы хотите узнать, какой элемент был нажат, вы можете добавить параметр в функцию 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);
});

Что-то вроде этих строк позволит вам получить ссылку на то, какой элемент был фактически нажат.

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() из моего кода

Answer 3

Одним из подходов является добавление слушателя к предку ваших элементов, т.е. 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>

Answer 4

Вы можете сделать это более выразительным

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