Как работает document.addEventListener?

Question

[vaskadogana]

Нагуглил вот такой код
собственно сам код собственно сам код https://codepen.io/graubnla/pen/EgdgZm

внутри всплывающего окна у меня есть кнопка которая удаляет элемент из списка вместе с собой, по клику по ней срабатывает событие типа кликнул вне элемента. Решил проблему через setTimeout 500.
Собственно интересно как так, ведь фактически я по ней кликаю, а потом она удаляется, от чего срабатывает вроде я кликнул за пределами блока?

Comments

[Роман Александрович]

код не видно

[vaskadogana]

Роман Александрович, решил не копипастить с кодепен так как там можно и поклацать, а в моем приложении много лишнего будет вот тут код про который спрашиваю

Answer 1

[iRedds]

addEventListenter повешен на документ, а не на элемент. Поэтому событие срабатывает везде.
Нужно или вешать слушателя на элемент или же проверять в событии что клик был именно по элементу.

Comments

[vaskadogana]

ну так там проверка стоит

handleOutsideClick(e) {
    // ignore clicks on the component itself
    if (this.node.contains(e.target)) {
      return;
    }
    
    this.handleClick();
  }

[iRedds]

vaskadogana, это проверка отлавливает только всплывающий элемент

[vaskadogana]

iRedds, вот пример https://jsfiddle.net/L87txz2p/6/ заленная полоска вроде как относится к всплывающему элементу

[iRedds]

vaskadogana, когда ты нажимаешь на "click me" у тебя срабатывает событие на нем, но оно не останавливается и начинает всплывать вверх. Доходит до слушателя на документе и так же срабатывает событие. А так как в первом событии ты удаляешь/скрываешь элемент, то во втором событии в попапе элемента уже нет. Поэтому проверка "this.node.contains(e.target)" не срабатывает.

[vaskadogana]

iRedds, спасибо, что разъяснили, а то логика не укладывалась в голове.

Answer 2

[Ваге]

я переписал ваш код .это то что вам нужно? https://jsfiddle.net/vaheqelyan/L87txz2p/

Comments

[vaskadogana]

то что я имею ввиду кликните по зеленой надписи (надпись внутри окошка)
она вроде как дочерний элемент, но срабатывает закрытие