Javacript tabs проблема со всплытием?

Question

[vlad89buzan]

Табы переключаются если только попасть точно в ".tabheader__item", если попасть в svg или h4 внутри не переключаются! собственно вопрос - как решить?
репозиторий https://vlad89buzan.github.io/Furniture2022/
github-page https://vlad89buzan.github.io/Furniture2022/dist

js

tabs(
        ".tabheader__item",
        ".tabcontent",
        ".tabheader__items",
        "tabheader__item--active"
    );
function tabs(tabsSelector,tabsContentSelector,tabsParentSelector, activeClass) {
    //tabs
    const tabs = document.querySelectorAll(tabsSelector);
    const tabsContent = document.querySelectorAll(tabsContentSelector);
    const tabsParent = document.querySelector(tabsParentSelector);
    console.log(tabs);
    console.log(tabsContent);
    console.log(tabsParent);
  
    function hideTabContent() {
      tabsContent.forEach((item) => {
        item.classList.add("hide");
        item.classList.remove("show", "fade");
      });
      tabs.forEach((item) => {
        item.classList.remove(activeClass);
      });
    }
    function showTabContent(i = 1) {
      tabsContent[i].classList.add("show", "fade");
      tabsContent[i].classList.remove("hide");
      tabs[i].classList.add(activeClass);
    }
  
    hideTabContent();
    showTabContent();
  
    tabsParent.addEventListener("click", (e) => {
      console.log('aaa');
      const target = e.target;
      console.log(e.target);
      
      if (target && target.classList.contains(tabsSelector.slice(1))) {
        tabs.forEach((item, i) => {
          if (target == item) {
            hideTabContent();
            showTabContent(i);
          }
        });
      }
    });
  }
  
  // module.exports = tabs;
  export default tabs;

Comments

[WapSter]

А при чем тут всплытие. У тебя в условие четко прописано if (target && target.classList.contains(tabsSelector.slice(1))), какой селектор должен быть, чтобы условие сработало

[vlad89buzan]

селектор должен быть '.tabheader__item', я думал если происходит событие клик по элементу, то событие должно всплывать, если оно произошло по детям этого элемента до самого элемента, сильно не пинайте, я только учусь

[vlad89buzan]

WapSter, как я решил, я отписал в ответах, есть более нормальное решение?

[WapSter]

vlad89buzan, всплытие то происходит. Только e.target говори на каком элементе произошел сам клик. Ищи методы по работе с dom, например как найти родителя

[vlad89buzan]

WapSter, ну так в ответах я и работал с parentElement и parentElement.parentElement типа с родителем и прародителем

[WapSter]

vlad89buzan, ну поставь консоль логи и посмотри, что тебе возращается. А если у тебя вложенность 1000 элементов тоже будешь использовать на каждый parentElement, когда есть closest?)

[vlad89buzan]

WapSter, а вот за это спасибо

Answer 1

[vlad89buzan]

function tabs(
tabsSelector,
tabsContentSelector,
tabsParentSelector,
activeClass
) {
//tabs
const tabs = document.querySelectorAll(tabsSelector);
const tabsContent = document.querySelectorAll(tabsContentSelector);
const tabsParent = document.querySelector(tabsParentSelector);

function hideTabContent() {
tabsContent.forEach((item) => {
item.classList.add("hide");
item.classList.remove("show", "fade");
});
tabs.forEach((item) => {
item.classList.remove(activeClass);
});
}
function showTabContent(i = 1) {
tabsContent[i].classList.add("show", "fade");
tabsContent[i].classList.remove("hide");
tabs[i].classList.add(activeClass);
}

hideTabContent();
showTabContent();

tabsParent.addEventListener("click", (e) => {

const target = e.target;


if (
target.classList.contains(tabsSelector.slice(1)) ||
target.closest(tabsSelector).classList.contains(tabsSelector.slice(1))
) {
tabs.forEach((item, i) => {

if (target == item || target.closest(tabsSelector) == item) {
hideTabContent();
showTabContent(i);
}
});
}
});
}

// module.exports = tabs;
export default tabs;