Задать вопрос
@ratatujef
javascript

Как сформулировать условие, при котором НЕ ближайший родитель имеет определенный класс и не имеет других или 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

буду рад любым идеям
  • Вопрос задан
  • 41 просмотр
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 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{
    //...
  }
});
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Требуется сделать видео/анимацию конвертирования OST файла
25 нояб. 2024, в 12:12
10000 руб./за проект
Верстка одностраничника
25 нояб. 2024, в 12:07
12000 руб./за проект
Разработка лэндинга-визитки для юридической компании
25 нояб. 2024, в 11:40
10000 руб./за проект
Ещё заказы