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

Question

[Neolq]

При клике на одну из карточек, вызывается popup. В карточках есть кнопка, нужно что бы при клике на неё, открытие popup не срабатывало. Не могу понять что не так со скриптом.
https://jsfiddle.net/p2yrcduL/1/

const popupRecommended = document.querySelector('.recommended__popup')
const cardRecommended = document.querySelectorAll('.recommended__card')
const favoriteBtn = document.querySelectorAll('.favorite-btn')

cardRecommended.forEach((cards) => {
   cards.addEventListener('click', function (e) {
      favoriteBtn.forEach((el) => {
         if (!popupRecommended.classList.contains('-open') && !el.contains(e.target)) {
            popupRecommended.classList.add('-open')
            document.body.classList.add('-lock')
         }
      })
   })
})

Answer 1

[Чипекве]

cardRecommended.forEach((card) => {
  card.addEventListener('click', (e) => {
    if (popupRecommended.classList.contains('-open') || e.target.classList.contains('favorite-btn')) return;
    popupRecommended.classList.add('-open');
    document.body.classList.add('-lock');
  })
})

Comments

[Neolq]

чет не работает(

[Чипекве]

Что именно не работает? Ошибки в консоли?
Без разметки это всё равно наугад получается.

[Neolq]

Чипекве, https://jsfiddle.net/59qnxodu/32/

[Чипекве]

Очевидно, что нужно подставить класс из разметки и будет работать: e.target.classList.contains('btn')

Логика же простая - если клик на кнопке, ничего не делать.

Можно через проверку тега вместо класса: e.target.tagName === 'BUTTON'

[Neolq]

Чипекве, в песочнице, действительно всё ок, видимо у меня что-то в коде не работает

[Чипекве]

Возможно внутри кнопки есть какие-то элементы, тогда можно заменить проверку класса на e.target.closest('button')

[Neolq]

Чипекве, Супер! Это работает, спасибо