Как получить дочерний элемент при клике на родите?

Question

[vasyok228]

Есть родительский блок <pre class="dialog__select"></pre> в котором есть список блоков, и событие клик не совсем корректно работает, если клик попадает по <div class="dialog__tab"> тогда получаю -1, если кликаю по <div class="dialog__row dialog__tablist"> тогда возвращает все отлично, как сделать так чтобы при клике на
<div class="dialog__tab"> перекинуло на <div class="dialog__row dialog__tablist"> клик ?

[...document.getElementsByClassName("dialog__select")].forEach((item) => {
    item.addEventListener('click', e => {
        e.stopPropagation();

        const listItem = Array.from(document.getElementsByClassName("dialog__row")).indexOf(e.target);
        console.log(listItem)
    })
})

<pre class="dialog__select"> // <- Родитель
    <div class="dialog__row dialog__tablist"> // <- (родитель) Клик по элементу
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
    </div>
    <div class="dialog__row dialog__tablist"> // <- (родитель) Клик по элементу
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
    </div>
    <div class="dialog__row dialog__tablist"> // <- (родитель) Клик по элементу
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
    </div>
    <div class="dialog__row dialog__tablist"> // <- (родитель) Клик по элементу
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
        <div class="dialog__tab">Text</div> // <- Должен возвращать номер (родителя) из списка
    </div>
</pre>

Answer 1

[Stalker_RED]

document.addEventListener('click', function(evt) {
  const dialogTab = evt.target.closest('.dialog__tab');
  if (dialogTab) { // если клик был по табу
    const dialogSelect = evt.target.closest('.dialog__select');
    const dialogRow = evt.target.closest('.dialog__row');
  }
});

Answer 2

[MrColdCoffee]

[...document.getElementsByClassName("dialog__select")].forEach((item) => {
    item.addEventListener('click', e => {
        e.stopPropagation();
				const trgt =  e.target.classList.contains('dialog__tab') ? e.target.parentNode.closest('.dialog__row')  : e.target ;

        const listItem = Array.from(document.getElementsByClassName("dialog__row")).indexOf(trgt);
        console.log(listItem)
    })
})