Как распространить событие и на дочерние элементы?

Question

[Николай Семенов]

Ребятушки, всем привет!

Есть такой обработчик

[].slice.call( document.querySelectorAll( '#multi-select' ) ).forEach( function(el) {
                    var dropdownList = el.querySelector('.dropdown-list');
                    
                    var dropdownBtn = el.querySelector('.dropdown-trigger');
                    function toggle() {
                        dropdownList.classList.toggle('open');
                    }
                    function remove() {
                      dropdownList.classList.remove('open');
                    }       
                    document.addEventListener('click', function (e) {
                        const target = e.target;
                        console.log(target);
                        target === dropdownBtn ? toggle() : target !== dropdownList ? remove() : false;
                    })
                } );

верстка

div.search-user__item#multi-select
                            label Язык
                            div.dropdown-trigger
                                span Не указано
                            ul.dropdown-list
                                li.dropdown-item
                                    input(type="checkbox" class="checkbox" id="English")
                                    label(for="English") English
                                li.dropdown-item
                                    input(type="checkbox" class="checkbox" id="rusian")
                                    label(for="rusian") Русский
                                li.dropdown-item
                                    input(type="checkbox" class="checkbox" id="chinese")
                                    label(for="chinese") 中國
                                li.dropdown-item
                                    input(type="checkbox" class="checkbox" id="spanish")
                                    label(for="spanish") español
                                li.dropdown-item
                                    input(type="checkbox" class="checkbox" id="italian")
                                    label(for="italian") italiano

условие target !== dropdownList ? remove() срабатывает только частично, оно не распространяется на вложенные элементы .dropdown-item. Это нормально? Как это исправить? Не перебирать же все вложенные элементы для этого?

Answer 1

[Александр Земляной]

События в js всплывают а не тонут.
Могу предложить только симулировать событие.

Comments

[Николай Семенов]

а это как?

[Александр Земляной]

https://developer.mozilla.org/ru/docs/Web/API/Even...

https://learn.javascript.ru/event-delegation

[Николай Семенов]

Александр Земляной: спасибо прочитал про делегирование интересная тема, сделал вот так

document.addEventListener('click', function (e) {
                        var target = e.target;
                        while (target != document) {
                            if (target === dropdownList || target.parentNode === dropdownList || target.parentNode.parentNode === dropdownList) {
                                return;
                            }
                            if (target === dropdownBtn) {
                                toggle();
                                return;
                            }
                             if (target !== dropdownList) {
                                remove();
                                return;
                            }
                            target = target.parentNode;
                        }
                   
                    });

единственное не нравиться городьба из "||" в итоге все равно пришлось выбирать все элементы дочерние
Или можно как то иначе условия выбрать?

Answer 2

[Анатолий Родин]

Почитайте про делегирование событий: https://learn.javascript.ru/event-delegation

Answer 3

[kulaeff]

Можно вместо условия

target !== dropdownList

попробовать

!target.contains(dropdownList) || !target.contains(dropdownItem)