20231215 TIL

요구사항

• 모달창 바깥의 화면을 클릭할 때도 화면이 꺼지게 해주세요
• 현재 구조 (close 함수를 실행하면 모달이 꺼진다)

<div class="modal-overlay" id="modal-overlay">
  <div class="modal">
    ...
    <button on:click={close}>
       <img src={closebtn} alt="button for closing modal">
    </button>
  </div>
</div>

Solution

• 단순히 modal-overlay에 click을 적용해주면 되는거 아니야? 라고 생각하기 쉽지만 그렇게되면 자식 노드인 modal창을 클릭해도 모달창이 꺼지게됨.

<div class="modal-overlay" id="modal-overlay" on:click={close}>
  <div class="modal">
    ...
    <button on:click={close}>
       <img src={closebtn} alt="button for closing modal">
    </button>
  </div>
</div>

stopPropagation

• 이벤트 버블링을 막아주는 함수 = 이벤트가 다음 요소로 자동으로 흐르지 않도록 도와줌
  -cf) preventDefault: 브라우저 고유의 정의된 동작을 막아주는 함수

<div class="modal-overlay" id="modal-overlay" on:click={close}>
  <div class="modal">
    ...
    <button on:click={close} on:click|stopPropagation={()=>{}}>
       <img src={closebtn} alt="button for closing modal">
    </button>
  </div>
</div>

• svelte 에서는 on:click|stopPropagation 이런식으로 |를 활용해 chaining을 할 수 있다