Блог

Я работаю над проектом, использующим TypeScript , и я сталкиваюсь с проблемой, связанной с элементами, имеющими дубликаты addEventListener .

Способ работы приложения заключается в том, что при первой загрузке страницы ничего не выполняется. Все TS классы продолжают работать в ожидании отправки события. Это событие поступает из серверной части, которая сообщает приложению, что оно готово к запуску.

 const dbEvent = new CustomEvent("backendLoadEvent");
document.dispatchEvent(dbEvent);
  

Когда TS класс получает это событие, он начинает сам проходить через dom, получая элементы и применяя все eventListeners необходимое для его правильной работы.

Внутри TS файла я добавлю слушателя так же, как обычно:

 const btnOrder = document.getElementById('btn-order');
btnOrder.addEventListener('click', function (e) {
  // Business logic here
  console.log('debug button order click');
});
  

Проблема в том, что серверная часть запускается несколько раз, что приводит к тому, что нажатие кнопки выполняется также несколько раз. Например, иногда console.log внутри события щелчок срабатывает дважды одновременно.

Я пытался сделать что-то вроде этого:

 const btnOrder = document.getElementById('btn-order');

if (btnOrder.getAttribute('listener') !== 'true') {
  btnOrder.addEventListener('click', function (e) {
    const elementClicked = e.target;
    elementClicked.setAttribute('listener', 'true');
  });
}
  

Проблема с этим подходом заключается в том, что он полагается на щелчок, поэтому, если пользователь нажимает после второго события из базы данных, это не сработает. Я не знаю, когда событие поступит в приложение и когда пользователь нажмет на кнопку.

Есть ли другой подход, который я мог бы использовать, чтобы предотвратить такое поведение?

Обратите внимание, что это простой пример, но в некоторых элементах страницы происходит много событий, это проект панели мониторинга. Итак, у нас есть такие модальности, как open / close, упорядочивание и фильтрация таблиц, добавление, удаление и редактирование элементов в таблице и так далее…