Как правильно отследить цепь кликов по элементам?

Question

Пользователь кликает по иконке корзины - элемент iconsDelete. После этого выскакивает модальное окно, где у пользователя спрашивается, хочет ли он удалить задачу. Если он кливает buttonNo, то модальное окно только закрывается и задача не удаляется, а если кликает на buttonYes, то удаляется задача. Все работает хорошо. Но если первый клик происходит на buttonNo, а второй на buttonYes, то удаляются две задачи со страницы, считая ту, на которую он отказался удалять нажав на buttonNo. Я не могу добиться, чтобы удалялся только один элемент от одного клика по buttonYes. Я пришел к выводу, что событие event записывается в память браузера. Как мне его аннулировать, после нажатия на кнопку buttonNo.

 const confirm = document.querySelector('#modal-delete'),
          buttonNo = confirm.querySelector('.button-no'),
          buttonYes = confirm.querySelector('.button-yes'),
          iconsDelete = document.querySelectorAll('.icons-delete');
 
 
    //Навесить корзинам в каждой задачи taskList обработчик события по удалению задачи
    // Если после показа модалки пользователь все таки согласился удалить задачу
    iconsDelete.forEach((btn, index) => {
      btn.addEventListener('click', (event) => {
        let target = event.target;
        confirm.classList.add('confirm_active');
        buttonYes.addEventListener('click', () => {
          confirm.classList.remove('confirm_active');
          target.parentElement.remove();
          taskDB.tasks.splice(index, 1);
        });
 
        // Если пользователь отказался удалять задачу после показа модалки
        buttonNo.addEventListener('click', () => {
          confirm.classList.remove('confirm_active');
        });
      });
    });

Answer 1

Помимо метода addEventListener() есть метод removeEventListener().

Он требует вторым аргументом непосредственно ту функцию, которая до этого была передана в addEventListener. Это может принести неудобства.

Можно вот так:

 let fn;
 element.addEventListener('click', fn = (event) => {
     element.removeEventListener('click',fn);
     /* ваш код тут . . . */
 }, false);

В приведенной выше конструкции событие выполнится один раз и сразу удалит себя.

Как вариант, прописывать события без addEventListener, например, так:

 element.onclick = (event) => {  /* . . . */  };

В таком случае новое событие перекрывает старое.

Также можно клонировать элементы методом cloneNode(), они клонируются без событий.

Но в вашем случае похоже подойдет лучше всего вот этот вариант из сниппета:

alert('Вы нажали '+(confirm('Вы хотите удалить это?') ? 'Да' : 'Нет'))

БЛОГ НА HUSL

Как правильно отследить цепь кликов по элементам?

Ответы (1 шт):