0

Делегирование клика отрабатывает, но не так как нужно. Клик висит на родителе табов и должен делегироваться только на обертки табов, но он распространяется и на вложенные элементы(иконки и текст) и когда event.target попадает на них, переключение не работает. Что нужно добавить в обработчик, чтобы убрать этот эффект?

    .info
        .info-header
            .info-header__tab
                +icon("med", "info-header__icon")
                span.info-header__desc Лечение
            .info-header__tab
                +icon("sun", "info-header__icon")
                span.info-header__desc Отдых
            .info-header__tab
                +icon("nature", "info-header__icon")
                span.info-header__desc Природа
            .info-header__tab
                +icon("meditation", "info-header__icon")
                span.info-header__desc Йога

        .info-tabcontent.fade



const ShowTabs = () => {
    let childTab = document.querySelectorAll('.info-header__tab'),
            parentTab = document.querySelector('.info-header'),
            contentTab = document.querySelectorAll('.info-tabcontent');

    const hideTabContent = (a) => {
        for (let i = a; i < contentTab.length; i++) {
            contentTab[i].classList.remove('show');
            contentTab[i].classList.add('hide');
        }
    };
    hideTabContent(1);

    const showTabContent = (b) => {
        if (contentTab[b].classList.contains('hide')) {
                contentTab[b].classList.remove('hide');
                contentTab[b].classList.add('show');
        }
    };

    parentTab.addEventListener('click', (event) => {
        let target = event.target;
        if (target && target.classList.contains('info-header__tab')) {
            for (let i = 0; i < childTab.length; i++) {
                if (target == childTab[i]) {
                    hideTabContent(0);
                    showTabContent(i);
                    break;
                }
            }
        }
    });
};
ShowTabs();

1 ответ 1

1

Можно воспользоваться методом closest https://developer.mozilla.org/ru/docs/Web/API/Element/closest

parentTab.addEventListener('click', (event) => {
    const target = event.target && event.target.closest('.info-header__tab');
    if (target) {
        for (let i = 0; i < childTab.length; i++) {
            if (target == childTab[i]) {
                hideTabContent(0);
                showTabContent(i);
                break;
            }
        }
    }
});

Суть в том, что метод вернет первого родителя с нужным селектором, либо null, если не нашел такого.

3
  • с closest та же история. Реагирует только при клике непосредственно по childTab, клик по иконке или тексту ни к чему не приводит 9 апр 2019 в 11:02
  • да, не заметил у вас там проверок дополнительных
    – ThisMan
    9 апр 2019 в 11:04
  • @АлександрАлексеев поправил
    – ThisMan
    9 апр 2019 в 11:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.