Удалить прослушиватель событий итерации анимации для анимированного дочернего узла

СЦЕНАРИЙ: У меня есть верхний/родительский <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 только к родительскому узлу и избежать его «унаследования» его дочерними узлами (так что я могу быть уверен, что сработает только его анимация, и мне даже не нужно заботиться о дочерних узлах в коде обработчика)?

Спасибо за вашу помощь, ребята

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

evgeni fotia 02.02.2019 20:51

Не вижу проблем jsfiddle.net/ws1ef793/1 проверьте консоль

evgeni fotia 02.02.2019 21:01

@evgenifotia Я попробовал e.stopPropagation();, но в этом сценарии это не действует ... (это меня не удивляет, правда)

danicotra 02.02.2019 21:05

вы даже можете удалить else e.target.removeEventListener("animationiteration", anim123);, и он все равно будет работать

evgeni fotia 02.02.2019 21:06

@evgenifotia Я знаю, что могу удалить ветку else в своем коде, потому что это не дает желаемого эффекта, но на самом деле мой вопрос: как заставить его работать при удалении срабатывания дочернего события? (P.S. В своей скрипке вы зарегистрировали только родительское событие div, попробуйте изменить его следующим образом: else { e.target.removeEventListener("animationiteration", anim123); console.info(e.target.className); }, и вы заметите, что дочерний элемент по-прежнему срабатывает даже после него... Я бы хотел, чтобы этого не произошло...) P.P.S. спасибо за ответы и помощь :)

danicotra 02.02.2019 21:22

Теперь я понимаю, но извините, я не могу установить e.bubbles на false. может быть, вы хотели бы добавить награду

evgeni fotia 02.02.2019 21:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
138
0

Другие вопросы по теме