СЦЕНАРИЙ:
У меня есть верхний/родительский <div>, на котором есть бесконечная анимация CSS.
Он также имеет несколько <div> в качестве подузлов/дочерних узлов, а некоторые (один или несколько) также могут иметь бесконечную анимацию CSS.
HTML-выдержка:
<div id = "top_div" class = "anim1">
<div class = "anim2">some more animated contents here</div>
<div>(this gets animated by effect of its parent, of course)</div>
</div>
Выдержка из CSS (просто для представления):
#top_div.anim1 {animation: swinging .5s linear infinite alternate forwards;}
@keyframes swinging {to{transform:rotate(20deg);}}
.anim2 {/*...another different infinite animation here...*/}
ТЕПЕРЬ ВОПРОС: Я добавил обработчик событий, потому что мне нужно что-то делать каждую итерацию родительской анимации... и мне нужен только этот! Проблема в том, что событие срабатывает, даже когда дочерние узлы повторяют бесконечную анимацию... Поэтому, конечно, я решил проверить, связано ли событие с анимацией родительского узла или нет, но Я также хотел бы попробовать удалить как-то обработчик событий из дочерних узлов. Я использую следующий Код JavaSript:
function anim123(e){
if (e.target == top_div && e.animationName == "swinging") do_what_I_need();
else e.target.removeEventListener("animationiteration", anim123);
}
top_div.addEventListener("animationiteration",anim123);
Ветка else, кажется, не имеет никакого эффекта, событие продолжает срабатывать, когда повторяется анимация дочерних узлов... Можете ли вы сказать мне, что с этим не так?
Может быть, я думаю, что не могу удалить то, чего «на самом деле не существует»? (и, действительно, к дочерним узлам на самом деле не подключен обработчик событий, они как бы «наследуют» это от своего родителя, так что...) Возможно ли вообще удалить эти «унаследованные» дочерние прослушиватели/обработчики событий или я должен довольствоваться простым «неделанием» do_what_I_need() при их срабатывании?
О, и можно ли когда-нибудь прикрепить обработчик событий animationiteration только к родительскому узлу и избежать его «унаследования» его дочерними узлами (так что я могу быть уверен, что сработает только его анимация, и мне даже не нужно заботиться о дочерних узлах в коде обработчика)?
Спасибо за вашу помощь, ребята
Не вижу проблем jsfiddle.net/ws1ef793/1 проверьте консоль
@evgenifotia Я попробовал e.stopPropagation();, но в этом сценарии это не действует ... (это меня не удивляет, правда)
вы даже можете удалить else e.target.removeEventListener("animationiteration", anim123);, и он все равно будет работать
@evgenifotia Я знаю, что могу удалить ветку else в своем коде, потому что это не дает желаемого эффекта, но на самом деле мой вопрос: как заставить его работать при удалении срабатывания дочернего события? (P.S. В своей скрипке вы зарегистрировали только родительское событие div, попробуйте изменить его следующим образом: else { e.target.removeEventListener("animationiteration", anim123); console.info(e.target.className); }, и вы заметите, что дочерний элемент по-прежнему срабатывает даже после него... Я бы хотел, чтобы этого не произошло...) P.P.S. спасибо за ответы и помощь :)
Теперь я понимаю, но извините, я не могу установить e.bubbles на false. может быть, вы хотели бы добавить награду



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


попробуйте добавить
e.stopPropagation();вверхуanim123