@ratatujef

Как сформулировать условие, при котором НЕ ближайший родитель имеет определенный класс и не имеет других или id?

Помогите советом,
есть вот такой код:
<Body>
    <div class="block another_block">
        <div class="wrapper">
            <div class="new_wrapper">
                <div class="something_else">
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="block">
        <div class="wrapper">
            <div class="new_wrapper">
                <div class="something_else">
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="block wrong_block">
        <div class="wrapper">
            <div class="new_wrapper">
                <div class="something_else">
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                    <div class="item"><p class="title">Item Name</p><a href="#" class="btn"><span></span></a></div>
                </div>
            </div>
        </div>
    </div>
</Body>

Мне нужно навесить разные обработчики событий при клике на ссылку (a.btn) из разных блоков. Важное условие, что для кнопок находящихся в блоке .block (где только этот класс и нет никаких других классов или id) должен срабатывать кусок когда, а при клике на ссылки в других блоках (где есть тот же .block, но присутствуют и другие). сами кнопки полностью одинаковые. менять документ не могу, мне нужна только надстройка на js

перебрать все блоки и получить тот, где classList.length===1, не получается так как страница постоянно перерисовывается.
Думаю что, нужно вешать addEventListener на документ, и задавать условие для event.target, но какое должно быть условие? как остледить родителя ели он не ближайший? или может есть другой вариант?
желательно чистый js

буду рад любым идеям
  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ответы на вопрос 1
MagnusDidNotBetray
@MagnusDidNotBetray
Самый елеустремленный человек
Так?
document.addEventListener('click', e => {
  if (!e.target.closest('.btn')){
    return false;
  }
  const block = e.target.closest('.block');
  if (block.classList.length === 1 && !block.id){
    //...
  }
  else{
    //...
  }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы