자식 레이어 팝업

자식레이어를 클릭했을 때 부모에게 등록된 리스너 실행을 막기 위해서는 자식레이어에서 stopPropagation을 사용한다.

<div class="first-layer">
  <button>Toggle</button>
  <div class="child-layer"></div>
</div>

const addEvent = (selector, eventName, listener) => {
  document.querySelector(selector).addEventListener(eventName, listener)
}
document.addEventListener('DOMContentLoaded', () => {
  addEvent('.first-layer', 'click', function () {
    const classList = this.classList
    if (classList.contains('open')) {
      classList.remove('open')
    } else {
      classList.add('open')
    }
  })

  addEvent('.child-layer', 'click', event => event.stopPropagation())
});