Обработчик события клика внутри обработчика события клика

Question

Сделал обработчик события клика внутри обработчика события клика. Мы выбираем элемент, внутри появляется еще один элемент с кнопками, по которым мы также можем кликать. Очевидно что при повторном клике по внешнему элементу, обработчик события накидывается повторно. Я не могу сделать оба события клика в самом верху функции, поэтому мне надо чтобы этот обработчик в какой то момент снимался, но при этом я мог делать по внутренним элементам сколько угодно кликов (я попробовал поместить удаление обработчика в конце функции обработчика клика - стал срабатывать только ОДИН клик и обработчик снимался)

let buttons = document.querySelectorAll('.box')

buttons.forEach(el => {
  el.addEventListener('click', showHidden)
})

function showHidden() {
  let hidden = document.querySelector('.hidden')

  hidden.classList.add('_active')

  let btns = document.querySelectorAll('.hidden .btn')
  btns.forEach(el => {
    el.addEventListener('click', addActive)
  })

  function addActive(e) {
    let thisBtn = e.target
    thisBtn.classList.toggle('_active')
  }
}

.body {
  display: flex;
}

.box {
  margin: 0 12px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  background-color: darksalmon;
  padding: 12px 24px;
  cursor: pointer;
}

.hidden {
  display: none;
  padding: 24px;
}

.hidden._active {
  display: flex;
}

.hidden .btn {
  margin: 0 12px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  background-color: #ccc;
  color: #fff;
  padding: 12px 24px;
  cursor: pointer;
}

.hidden .btn._active {
  background-color: #000;
  color: #fff;
}

<div class="body">
  <div class="box">box 1</div>
</div>
<div class="hidden">
    <div class="btn">btn1</div>
    <div class="btn">btn2</div>
    <div class="btn">btn3</div>
    <div class="btn">btn4</div>
</div>

БЛОГ НА HUSL

Обработчик события клика внутри обработчика события клика

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