Что сделать, что бы addEventListener не учитывал дочерний dom?

Question

[Nwton]

Необходимо, что бы по завершению анимации у конкретного блока, срабатывала функция. Повесил addEventListener on animationend, работает.

Проблема в том, что функция также срабатывает, когда завершается анимация одного из дочерних элементов. Как сделать так, что бы listener слушал только конкретный блок и игнорировал весь node?

Answer 1

[lem_prod]

на дочерних элементах я так понял тоже висят обработчики для данного события, и когда они отрабатывают происходит всплытие, способ первый, остановить всплытие в обработчике event.stopPropagation(); в начале события
второй, добавить проверку, что событие отрабатывает именно на том элементе, на которому было присвоено if (this != event.target) return;

Comments

[Nwton]

верно, на child тоже есть onanimend, буду пробовать ваш вариант

[lem_prod]

Nwton: остановить всплытие надо именно в обработчике child-а, поэтому если его писали не вы, намного проще сделать второй вариант в обработчике parent-а

[vintage]

lem_prod: никогда не останавливайте события, если не хотите получить проблем в будущем. Типиный пример - вам надо скрыть окно по клику во вне, а какой-то умник остановил событие и вы не можете поймать клик во вне.

[vintage]

К тому же конкретно "animationend" - не отменяемое.

[Nwton]

vintage: что значит не отменяемое? removeEventListener есть же, работает отлично

[vintage]

Nwton: https://developer.mozilla.org/ru/docs/Web/Events/a...

[lem_prod]

vintage: не отменяемое, это значит, что нельзя отменить действие по умолчанию, то есть толка от event.preventDefault() не будет, а останавливать всплытие ни кто не запрещал.
Можете проверить, если не верите моим словам.
По поводу "никогда не останавливайте события, если не хотите получить проблем в будущем.", в большинстве случаев я с вами соглашусь, но как раз для анимации, мне кажется это может быть уместно.

[vintage]

lem_prod: да нет, верю: https://developer.mozilla.org/ru/docs/Web/API/Even...

Answer 2

[Алексей Ярков]

Вы код покажите. Но вангую что как-то так:

el.addEventListener("animationend", function handler (e) {
    // проверяем e.target и принимаем решение
});

Comments

[Nwton]

код вида dom.addEventListener('animationend', done), ничего особенного. Понял, попробую сделать проверку

Answer 3

[abberati]

Что сделать, что бы addEventListener не учитывал дочерний dom?

Узнать про основы работы с событиями и что такое event bubbling и event capturing, пойти от теории к практике, а не наоборот.