[Javascript] 이벤트 버블링 (with handleOutsideClick) _ event.stopPropagation()

이벤트 버블링

이벤트가 시작된 곳에서 상위 요소로 이벤트가 계속해서 전파된다.

따라서 아래의 예제에서 버튼을 클릭하면 handleOutsideClick 함수가 실행되어 메뉴가 열리지 않는( 닫아버리는) 문제가 발생했다 . 이를 해결 하기 위해 event.stopPropagation() 을 사용할 수 있었다.

<script>
    // #region dropdown
      let isOpen = false;

      function toggleMenu(event) {
        isOpen = !isOpen;
        event.stopPropagation(); // 이벤트 전파를 막는다.
      }

      function selectMenu() {
        isOpen = false;
        showModal = true;
      }

      // 메뉴 바깥 영역 클릭 이벤트 핸들러
      function handleOutsideClick(event) {
        if (isOpen && !event.target.closest('.menu')) {
          toggleMenu();
        }
      }
      onMount(() => {
        window.addEventListener('click', handleOutsideClick);
      });
  //#end region
</script>

<!-- Menu -->
<article
  class="{isOpen ? 'h-44' : 'h-0'} overflow-hidden duration-100 absolute menu"
>
  <!-- Menu Item -->
  <div
    class="bg-[#141414] shadow-[inset_0_0_5px_#4B5563] shadow-gray-600 rounded-md divide-y divide-[#383838] px-3"
  >
    <ul class="text-2xl w-full py-4">
      <button
        class=" py-1.5 w-full hover:bg-[#1C1C1C] px-20 rounded"
        on:click={() => {
          selectMenu();
        }}
      >
        KPI 이력
      </button>
    </ul>

    <div class="flex flex-col items-center py-5 justify-center">
      <span class="text-[0.9rem] text-[#9D9D9D]">최신 버전 사용중</span>
      <span class="text-[0.9rem] text-[#9D9D9D]">Version 1.0.0</span>
    </div>
  </div>
</article>