Переделать делегирование событий, чтобы ничего не сломалось

Question

хочу переделать делегирование событий. Сейчас при клике на блок, открывается другая страница в новом окне. А при клике на элементы блока (ссылки, кнопки), отрабатывают кнопки и клик по блоку не происходит.

Есть такая проблема, в блоке в любой момент могут быть добавлены новые элементы со своей логикой и каждый раз в условие conditions добавлять новые исключения не совсем удобно и правильно.

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

Чистый JS или JQuery, без разницы

const block = document.querySelector('.block');
const change = block.querySelector('.block__change');

change.addEventListener('click', function() {
  block.querySelector('.block__text').style.color = '#f3ca63';
});

block.addEventListener("click", function(e) {
  var classList = e.target.classList;
  var conditions = classList.contains("block__more") ||
    classList.contains("block__title") ||
    classList.contains("block__button") ||
    classList.contains("block__change") ||
    classList.contains("block__text-link");

  if (!conditions) {
    var link = this.querySelector(".block__title");
    window.open(link.getAttribute("href") + 'search/sometext');
  } else {
    e.stopPropagation();
    console.log('some magic done');
  }
});

.block {
  width: 400px;
  height: 250px;
  padding: 50px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.block__title {
  display: block;
  font-size: 30px;
  color: #444;
  margin-bottom: 30px;
}

.block__text {
  margin-bottom: 30px;
}

.block__text-link {
  color: red;
}

.block__button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  text-decoration: none;
}

.block__change {
  margin-left: 30px;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #444;
  text-decoration: none;
}

<div class="block">
  <a href="https://google.com" class="block__title">Title</a>
  <p class="block__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut metus vitae mi vestibulum finibus. Ut ultrices imperdiet <a class="block__text-link" href="https://yahoo.com">dolor</a>, nec malesuada tortor tincidunt ac. In id venenatis nisi. Nulla
    facilisi. Vestibulum diam mauris, sodales at sapien non, porta sollicitudin sem. Proin quis ornare <a class="block__text-link" href="https://mail.ru">leo</a>. Phasellus in porttitor ipsum.
  </p>
  <a href="https://ya.ru" class="block__button">Button</a>
  <a href="http://www.nooooooooooooooo.com/" class="block__change">change text color</a>
</div>

БЛОГ НА HUSL

Переделать делегирование событий, чтобы ничего не сломалось

Ответы (0 шт):